Add tailwind (JIT) to a react app without ejecting or using craco

Hello guys,
Official tailwindcss docs uses a package called craco during installation of tailwindcss in react app.
I don't particulary like it because same can easily be achieved with just postcss. Here are the steps.
Step 1 - Create a react and add dependencies
# install react and navigate inside
npx create-react-app my-app
cd my-app

# install packages
yarn add autoprefixer postcss postcss-cli postcss-import tailwindcss

# replace yarn add with npm install if using npm
Step 2 - Add configs
  • Create two files tailwind.config.js and postcss.config.js in root
  • ├── src/
    ├── tailwind.config.js
    ├── postcss.config.js
    └── package.json
  • Paste this in tailwind.config.js:
  • module.exports = {
        mode: "jit",
        purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx}"],
        theme: {},
    };
  • Paste this in postcss.config.js:
  • module.exports = {
      plugins: [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
      ],
    };
    Step 3 - Create styles
  • Create a folder styles inside src
  • Create tailwind.pcss and output.css inside it
  • src/
    ├── styles/
             ├── output.css
             └── tailwind.pcss
    ├── App.js
    └── index.js
  • Add following code inside tailwind.pcss
  • @import "tailwindcss/base.css";
    @import "tailwindcss/components.css";
    @import "tailwindcss/utilities.css";
    Step 4 - Modify package.json
    Replace scripts with
    "scripts": {
        "start": "react-scripts start",
        "build": "yarn build:css && react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "watch:css": "TAILWIND_MODE=watch postcss src/styles/tailwind.pcss -o src/styles/output.css --watch",
        "build:css": "postcss src/styles/tailwind.pcss -o src/styles/output.css --minify"
    },
    Note: Just replace yarn with npm run if you are a npm user
    Step 5 - Running
    Replace App.js with:
    import "./styles/output.css"
    function App() {
     return (
       <div class="bg-green-100 border-green-600 border-b p-6 m-4 rounded text-2xl text-center">
         Hello World
       </div>
     );
    }
    
    export default App;
    Now open two terminals and run these commands separately
    yarn watch:css
    and
    yarn start
    The output should be:
    Congrats! You have successfully installed and used tailwindcss 🚀🚀

    36

    This website collects cookies to deliver better user experience

    Add tailwind (JIT) to a react app without ejecting or using craco