DEV Community


Discussion on: Adding Tailwind to existing React app?

codeprototype profile image
Kevin Le • Edited

I did for a new ReactJS here:

but since your question is for an existing app, you might want to try the following:

  1. npm i --save tailwindcss tailwindcss-tables //tailwindcss-tables if you want table

  2. In your styles.css, add 3 lines

@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Add the following to webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//other stuff
module: {
    rules: [
      //other rules
        test: /\.(css|scss)$/,
        use: [


plugins: [
    new MiniCssExtractPlugin({
        filename: 'style.css',
        chunkFilename: 'style.css'
    //other plugins
  1. Since MiniCssExtractPlugin and postcss-loader are required, install them:
    npm i --save-dev mini-css-extract-plugin postcss-loader

  2. Create a new npx tailwind.config.js by running the command (generates default)
    npx tailwind init tailwind.config.js

  3. Create a config file for postcss called postcss.config.js
    touch postcss.config.js

If you need @fullhuman/postcss-purgecss, then install it as well (I think you need postcss-import also).
npm i --save-dev @fullhuman/postcss-purgecss postcss-import

Else, you can remove those lines in the postcss.config.js.
I think that's all the steps. Please refer to my post if necessary