How to use TailwindCSS in ExpressJS apps

Updated may 2020

If you want to use Tailwind without installing webpack or gulp, here is a simple way:

First cd into your express application

Install tailwind

npm install tailwindcss --save-dev

Create the tailwind configuration file

This command will create a tailwind.config.js file in your root directory

npx tailwindcss init

Install postcss globally

npm install -g postcss-cli

Once postcss is installed you can run postcss commands

Create a postcss configuration file

Create the postcss configuration file in your root directory and call it postcss.config.js, you can create it with:

touch postcss.config.js

Copy the following configuration into postcss.config.js:

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

Import tailwind into a CSS file

I like to create it in public/stylesheets/tailwind.css but you can create it where you prefer. Then copy the following code into it:

@tailwind base;

@tailwind components;

@tailwind utilities;

Add srcipts to package.json file

Here we add a build:css script to compile Tailwind with postcss, the CSS paths are as per my preference, I compile it to stylesheets/style.css so it is available in my frontend.

"scripts": {
    "start": "yarn build:css && node ./bin/www",
     "build:css": "postcss public/stylesheets/tailwind.css -o public/stylesheets/style.css"
  },

Run your app

You can now run your app with nodemon or with npm run start, every time the app restarts it will recompile the tailwind css if needed (example, if you changed some of the classes in tailwind.js)

Import style.css in your application

Import style.css in your application as you normally would. Congrats tailwind works without webpack or gulp!