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!
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js file as it was, and just add "./src/**/*.{js,jsx,ts,tsx}" to its content. Perhaps a different tailwind version from February to today.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.com/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 components 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 components 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 components:
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}", // Add paths to all your React components
],
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 components;
@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)
