Using Tailwind CSS with Aurelia 2 and Webpack
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
for more information take a look at Tailwind CSS
1- Run the following command in your terminal
2- Use your type of project, I am using Default Typescript with Webpack and CSS.
3- Install Tailwind CSS in your project via this command
4- After installation go to the root folder and run the below command too
This command will create a
tailwind.config.js file in the root folder beside the
webpack.config.js file with the following content
5- Open your
webpack.config.js file and add the below line into the
postcssLoader literal object as a first item in
plugins array. (Just like the picture)
6- Add these lines to the top of your main CSS file (for example
In an easy way you can add the following Tailwind CSS snippet code to your project.
I have added this to
my-app.html now you can run the project by
Seems everything works
Purgecss is particularly effective with Tailwind because Tailwind generates thousands of utility classes for you, most of which you probably won’t actually use. For more information, you can read Controlling File Size.
If you run the
build command, you will see the final bundle side is huge (even in production mode)
tailwind.config.js file and replace
Now, execute the
build command again and see the result.