I have an existing React Project. I had used the bootstrap classes earlier but now I want to replace it with the Tailwind CSS. I had already asked about my error here in this question but didn't get any response, so I want to know the process from the beginning.

You can also find more details related to the project in the shared here.

Thank you in Advance for helping me!

I have an existing React Project. I had used the bootstrap classes earlier but now I want to replace it with the Tailwind CSS. I had already asked about my error here in this question but didn't get any response, so I want to know the process from the beginning.

You can also find more details related to the project in the shared here.

Thank you in Advance for helping me!

• javascript
• css
• reactjs
• tailwind-css
• tailwind-ui

3 Answers 3

1. Install Tailwind CSS with postcss & autoprefixer

yarn add -D tailwindcss postcss autoprefixer

2. Generate tailwind.config.js and postcss.config.js

yarn tailwindcss init -p

3. Modify tailwind.config.js file

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. Add tailwind base, ponents and utilities to index.css

@tailwind base;
@tailwind ponents;
@tailwind utilities;

It is very simple. Follow the official documentation and start using Tailwind. You can skip Step 1 as you have already created your React App.

Install Tailwind CSS in a React App : https://tailwindcss./docs/guides/create-react-app

Step 1: Remove Bootstrap
Uninstall Bootstrap:
Remove the Bootstrap package from your project using npm or yarn:

terminal 
npm uninstall bootstrap

or

terminal 
yarn remove bootstrap
Remove Bootstrap Imports:

Remove any Bootstrap-related imports from your React ponents and global stylesheets.

For example, if you had this in your index.js or App.js:

import 'bootstrap/dist/css/bootstrap.min.css';
Remove it.

Remove Bootstrap Classes:

Go through your ponents and remove all Bootstrap-specific classes (e.g., btn, container, row, col).

Step 2: Install Tailwind CSS
Install Tailwind CSS:
Install Tailwind CSS and its dependencies using npm or yarn:

terminal 
npm install -D tailwindcss postcss autoprefixer

or

terminal
yarn add -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS:
Generate the tailwind.config.js and postcss.config.js files:

terminal
npx tailwindcss init -p

Configure Tailwind CSS:

Open the tailwind.config.js file and configure the content property to include your React ponents:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Add paths to all your React ponents
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind to Your CSS:

Create a src/index.css file (if it doesn’t already exist) and add the following Tailwind directives:

@tailwind base;
@tailwind ponents;
@tailwind utilities;

Import Tailwind CSS:

Import the index.css file in your src/index.js or src/App.js:

import './index.css';

Step 3: Replace Bootstrap Classes with Tailwind Classes
Now that Tailwind CSS is set up, you can start replacing Bootstrap classes with Tailwind utility classes.
Example: 
-> Layout
Bootstrap Class | Tailwind Class
container   | container mx-auto
row flex | flex-wrap -mx-4
col px-4 | (with flex or grid)