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:
- 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].
- IMPORTANT: Add the required post-css loader and the path of postcss.config to run the tailwind[27-31].
- 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