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

This content originally appeared on DEV Community and was authored by kiranojhanp

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:

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 🚀🚀

This content originally appeared on DEV Community and was authored by kiranojhanp

Print Share Comment Cite Upload Translate Updates

APA

kiranojhanp | Sciencx (2021-12-05T15:49:23+00:00) Add tailwind (JIT) to a react app without ejecting or using craco. Retrieved from https://www.scien.cx/2021/12/05/add-tailwind-jit-to-a-react-app-without-ejecting-or-using-craco/

MLA

" » Add tailwind (JIT) to a react app without ejecting or using craco." kiranojhanp | Sciencx - Sunday December 5, 2021, https://www.scien.cx/2021/12/05/add-tailwind-jit-to-a-react-app-without-ejecting-or-using-craco/

HARVARD

kiranojhanp | Sciencx Sunday December 5, 2021 » Add tailwind (JIT) to a react app without ejecting or using craco., viewed ,<https://www.scien.cx/2021/12/05/add-tailwind-jit-to-a-react-app-without-ejecting-or-using-craco/>

VANCOUVER

kiranojhanp | Sciencx - » Add tailwind (JIT) to a react app without ejecting or using craco. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/05/add-tailwind-jit-to-a-react-app-without-ejecting-or-using-craco/

CHICAGO

" » Add tailwind (JIT) to a react app without ejecting or using craco." kiranojhanp | Sciencx - Accessed . https://www.scien.cx/2021/12/05/add-tailwind-jit-to-a-react-app-without-ejecting-or-using-craco/

IEEE

" » Add tailwind (JIT) to a react app without ejecting or using craco." kiranojhanp | Sciencx [Online]. Available: https://www.scien.cx/2021/12/05/add-tailwind-jit-to-a-react-app-without-ejecting-or-using-craco/. [Accessed: ]

rf:citation

» Add tailwind (JIT) to a react app without ejecting or using craco | kiranojhanp | Sciencx | https://www.scien.cx/2021/12/05/add-tailwind-jit-to-a-react-app-without-ejecting-or-using-craco/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.