How to use Tailwind CSS in an ExpressJS app.

This post will guide you if you want to use Tailwind CSS without having to use any bundler.

First use your terminal to change directory to your express application. Then install tailwind in your express app using:

npm i tailwindcss

Run this command to generate the tailwind configuration file. This will create a tailwind.config.js file in your root directory.

npx tailwindcss init

Create a tailwind.css file in your public folder, I would advice you to create a stylesheets folder under the public folder to properly seperate your files(public/stylesheets/tailwind.css). After that copy and paste the following code in the tailwind.css file.

@tailwind base;

@tailwind components;

@tailwind utilities; 

Install postcss globally. This allows us to use postcss in other projects without reinstalling for each projects.

npm install -g postcss-cli

Create a postcss configuration file in your root directory and call it postcss.config.js. Then copy the following configuration into your postcss.config.js file:

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Add a build:css script to your package.json file so you can always build your css by running the command:

npm run build:css

"scripts": {
     "build:css": "postcss public/stylesheets/tailwind.css -o public/stylesheets/style.css"
  },

Import style.css in your application as you normally would and run your app. Congratulations.

Comments

[Sensi1707]

you just stopped the guide where i don't know how to do it...

[Jumbo Daniel]

where step do you have a problem implementing?

[Syed Jawad Bin Azam]

Is this a guide or a trauma ?