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:

For further reading, you can visit the following links:

Thank You and happy coding!




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Big O Yeah

Google Chrome 86 ships a new battery-saving feature

How does String.padStart actually work?

NodeOS: The JavaScript Based Operating System

How To Run Next.js App With Nodejs API on Minikube

Yes Im like you

Printing with Vue, Electron and Node

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gustavo Carvalho

Gustavo Carvalho

More from Medium

Useful tips for your pet-project #1

Custom Service Worker in any app with esbuild

Generate a Bearer Token without extra libraries

Dynamically bundle i18n file in shared UI component based on current locale