Guide To Install Tailwind Scss For Webpack 5.0 | TailwindSCSS

Angelic Sanoy

Angelic Sanoy

Founder | Bookworm Head

BookwormHead » Blog » Front-end » Guide To Install Tailwind Scss For Webpack 5.0 | TailwindSCSS

1. Tailwind And Dependencies

Run the following in the terminal to install the tailwind, post-css loader, sass-loader, mini css extractor and generate a tailwind.config.js

2. Editing The Tailwind Config

Add the default declaration in your tailwind.config by pasting the code. Make sure you purge the correct directory where your html sit,  Example: my index.html sits in dist/index.html. You can add more in your purge if you have more than file e.g .js, css, you can disable the purge after by sitting it to false.

3. Create A postcss.config.js In Your Root Directory

4. Declaration To Add On Wepack.config.js

I assume that you already install the dependencies in step 1. Now, let’s start declaring the following:

  1. We need to require the css extractor to create a copy of css file in your dist folder [see line 1] . Also, add the css extrator to your rules [see line 18-22 ]. Lastly,  declare the path under the plugins to instruct webpack where the system generate the css file [59-60].
  2. IMPORTANT: Add the required post-css loader and the path of postcss.config to run the tailwind[27-31].
  3. Tailwind doesn’t really recommend to use SCSS so if you want it for personal preference, you need to declare the SCSS as your loader. Note: scss-loader minimize your css files by default but you can adjust the outputStyles if you wanted to be expanded.

Note! I am assuming that you already installed webpack. If you don’t, check their documentation here or I suggest to watch the crash course Cole created for Webpack powered by FreeCodeCamp