DEV Community

Logan
Logan

Posted on

Adding Tailwind to existing React app?

I’m trying to find a way to install Tailwind on an existing React app. Everything I’m finding has them concurrently installed npx in the terminal. Any help would be appreciated.

Top comments (3)

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

Collapse
 
dance2die profile image
Sung M. Kim

I found this, How to add Tailwind to unejected Create-React-App yesterday. KCD used a macro to add Tailwind to CRA.

Not sure how your React site bootstrapped but won't hurt to check it out.

Collapse
 
meltonlogan615 profile image
Logan

It’s part of a group project that I don’t have admin access to. I can toss together a quick clone on my GitHub and send you a collaborator invite.