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.

Comments

[Kevin Le]

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;

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",
        ]
      }
    ]
  },

then

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

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

[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.

[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.