This content originally appeared on DEV Community and was authored by Dinesh G
Tailwind CSS is a utility-first CSS framework that enables developers to quickly build modern and responsive user interfaces. When combined with React.js, a popular JavaScript library for building user interfaces, the two technologies synergize to streamline the development process. In this article, we'll explore how to integrate Tailwind CSS seamlessly into a React.js project.
Step 1: Create a React App
If you haven't already set up a React app, use the following commands to create one:
npx create-react-app my-tailwind-app
cd my-tailwind-app
Step 2: Install Tailwind CSS
Next, install Tailwind CSS and its dependencies usingnpm:
npm install tailwindcss postcss autoprefixer
Step 3: Configure Tailwind CSS
Create a tailwind.config.jsfile in the root of your project and configure it:
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./public/index.html",
],
theme: {},
plugins: [],
};
Step 4: Create PostCSS Configuration
Create a postcss.config.js file in the project root:
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Step 5: Import Tailwind CSS in your styles
Open the src/index.css file and import Tailwind CSS:
src/index.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Step 6: Use Tailwind CSS Classes in React Components
Now, you can use Tailwind CSS classes directly in your React components. For example:
src/components/MyComponent.jsx
import React from 'react';
const MyComponent = () => {
return (
<div className="bg-blue-500 text-white p-4">
This is a Tailwind CSS styled component.
</div>
);
};
export default MyComponent;
Step 7: Run your React App
Finally, start your React app to see the integration in action:
npm start
Visit http://localhost:5173in your browser, and you should see your React app with Tailwind CSS styles applied.
HAPPY CODING
This content originally appeared on DEV Community and was authored by Dinesh G
Dinesh G | Sciencx (2025-10-01T09:41:15+00:00) Using Tailwind CSS with React.js. Retrieved from https://www.scien.cx/2025/10/01/using-tailwind-css-with-react-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.