Easy Tailwind CSS with NWB

Process any .css file with Tailwind by leveraging NWB’s built-in support for Postcss

Install NWB

npm i nwb -g

(a) Add to an existing project

cd PROJECT_NAME
nwb init react-app

(b) Create a new project

nwb new react-app PROJECT_NAME

Note: NWB also has built-in support for Preact (substitute preact-app above), or can be customized to support other JavaScript app frameworks.

Install Tailwind

npm i tailwindcss --save-dev

Create Tailwind’s configuration file:

./node_modules/.bin/tailwind init

You can customize this file to your heart’s content by following the guide.

Configure Webpack

Edit the nwb.config.js file like so:

const tailwindcss = require('tailwindcss')
module.exports = {
  …
  webpack: {
   rules: {
     postcss: {
       plugins: [
         tailwindcss('./tailwind.js'),
         require('autoprefixer'),
       ]
     }
   }
  }
}

Now running or building with NWB will live reload .css file with Tailwind support:

npm start
npm run build

That’s it!

Send me any questions on Twitter: @concreteniche