How to configure Webpack 5 to work with TailwindCSS and PostCSS
One of the main steps in development is creating the configuration and making everything ready to go.
In this tutorial, I will be showing you how to configure Webpack 5 to run with Tailwind CSS and PostCSS using yarn to manage all dependencies.
Before You start make sure You have Node.js installed on your machine You can find some reference links at the end of the article.
Open up your terminal and enter the following commands:
$ mkdir webpack-tailwind-template$ cd webpack-tailwind-template
Here we created the folder named webpack-tailwind-template and then we moved into it.
Now let’s start yarn:
$ yarn init -yp
The next step is to add Webpack and all other dependencies
$ yarn add -D webpack webpack-cli \ babel-loader @babel/core @babel/preset-env \ tailwindcss@latest postcss@latest autoprefixer@latest \ postcss-loader html-webpack-plugin
Next, let’s add the required webpack configuration. Create a file named webpack.config.js on the root directory of your project and add the following:
In this file, we are making Webpack aware of our dependencies and how to handle our files. Webpack has a lot of features and tweaks you can make to work with your project.
The next step is to create some files. First, an `index.html` file at our root directory will be our HTML template which Webpack will use to generate the final HTML. After that create a folder named `/src` with the file `index.js`
By now your project should have the following structure:
webpack-tailwind-template|- node_modules/|- src/| — index.js|- index.html|- package.json|- webpack.config.js|- yarn.lock
To make sure everything is working, add and save the following into src/index.js
Also, add this initial basic HTML structure inside index.html
Before bundling our project, we need to add some scripts to our package.json file. This will make our life easier when running Webpack commands through yarn.
Open your package.json and update with the following:
The scripts refer to the keywords that we enter on the terminal to execute the corresponding command.
To test the results enter the following on your terminal:
$ yarn build:dev
Here we used the `build:dev ` to bundle the files for the development environment, which means the output files on the folder dist/ will not be minified and we can read the code if needed.
Now move into the dist/ folder and open the index.html with your favorite browser. If everything worked, You should see the text “hello world” like the example below
Finally, add the tailwind and PostCSS configuration files:
create postcss.config.js on the root directory and add the following
Run the following command on the terminal
$ yarn tailwindcss init
This will generate a file called tailwind.config.js, open it and add the following inside the purge array:
Here we specify the path where our files using tailwind classes are. The goal of PurgeCSS is to remove all unused rules from our final CSS and optimize our CSS file when building for production.
The last configuration step is importing all the tailwind rules inside our main CSS file. Create style.css inside the src/ directory and add the following:
Now we can use tailwind classes to style our project. To test this, change the index.js file and add the following:
To make sure our HTML template is also working, add some classes to index.html as well:
Finally, build for production and check the results in the browser. On the terminal enter:
$ yarn build
Open your HTML file from the dist/ folder and, you should have a result similar to the example below:
You can check the source code here:
To run this project locally, make sure you have the following installed: Node.js, more information here Yarn package…
For further reading, you can visit the following links:
Installation - Tailwind CSS
Learn how to get Tailwind CSS up and running in your project.
1 - Introduction
Yarn is a package manager for your code. It allows you to use and share code with other developers from around the…
Thank You and happy coding!