DEV Community

Discussion on: Adding Tailwind to existing React app?

View post
Collapse
 
codeprototype profile image
Kevin Le • • Edited

I did for a new ReactJS here: dev.to/codeprototype/accelerating-...

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;
Enter fullscreen mode Exit fullscreen mode
  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: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "postcss-loader",
        ]
      }
    ]
  },
Enter fullscreen mode Exit fullscreen mode

then

plugins: [
    new MiniCssExtractPlugin({
        filename: 'style.css',
        chunkFilename: 'style.css'
    }),
    //other plugins
]
Enter fullscreen mode Exit fullscreen mode

  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

gist.githubusercontent.com/khle/cc...

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