1

I am using svelte + webpack + tailwindcss for a project. When I build the project with npm run build my styles load correctly, however if I run webpack in watch mode with npm run watch, tailwind does not load new classes when I change a file. Any pointers on how to get tailwind to work with watch mode?

webpack.config.js

Relevant rules from webpack config

{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
    {
        test: /\.svelte$/,
        loader: 'svelte-loader',
        options: {
            preprocess: SveltePreprocess({
                postcss: {
                    plugins: [
                        require("tailwindcss"),
                        require("autoprefixer")
                    ]
                }
            })
        }
    },

tailwind.config.cjs

module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.svelte',
    './src/**/*.ts',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json

My scripts from package.json for build and watch are:

{
  "build": "tsc && webpack --mode=development",
  "watch": "webpack --watch --mode=development"
}
Will Epperson
  • 51
  • 5
  • can you provide me with the full configuration, like how you made the setup for the svelte+tailwind+webpack. providing a code sandbox link will be much better @WillEpperson – Arjunsingh thakur Oct 18 '22 at 07:30

0 Answers0