@scotty_walker
To use React.js with Tailwind CSS, you can follow the steps below:
- Create a new React.js project using Create React App:
1
2
|
npx create-react-app my-app
cd my-app
|
- Install Tailwind CSS and its dependencies:
1
|
npm install tailwindcss @tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
|
- Create a tailwind.config.js file at the root of your project with the following configuration:
1
2
3
4
5
6
7
8
9
10
11
12
|
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
|
- Create a postcss.config.js file at the root of your project with the following configuration:
1
2
3
4
5
6
7
|
// postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
|
- Import Tailwind CSS styles in your index.css file:
1
2
3
4
|
/* index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
|
- Import the index.css file in your index.js file:
1
2
3
4
5
6
7
8
9
10
11
12
|
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
|
- Start your development server:
You can now start using Tailwind CSS classes in your React components. To apply Tailwind CSS classes, simply add them to your JSX elements like this:
1
|
<div className="bg-blue-500 text-white p-4">Hello, Tailwind CSS!</div>
|
That's it! You have successfully set up React.js with Tailwind CSS in your project.
