How to use react.js with tailwind.css?

by scotty_walker , in category: HTML & CSS , 3 months ago

How to use react.js with tailwind.css?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by denis , 14 days ago

@scotty_walker 

To use React.js with Tailwind CSS, you can follow the steps below:

  1. Create a new React.js project using Create React App:
1
2
npx create-react-app my-app
cd my-app


  1. Install Tailwind CSS and its dependencies:
1
npm install tailwindcss @tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9


  1. 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: [],
}


  1. 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'),
  ],
}


  1. Import Tailwind CSS styles in your index.css file:
1
2
3
4
/* index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


  1. 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')
);


  1. Start your development server:
1
npm start


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.