This is a quick tutorial on how to use Tailwind CSS for your React project.

Translated by Kevin Sheehan medium.com/swlh/settin…

Step 1: Create the project

$ npx create-react-app project-name
$ cd project-name
Copy the code

Step 2: Install the tailwind dependency

# Using npm
$ npm install tailwindcss --save-dev

# Using Yarn
$ yarn add tailwindcss --dev
Copy the code

Step 3: Set up PostCSS and Autoprefixer

Run the following command to create tailwind. Js, which is the default tailwind configuration file.

$ npx tailwind init tailwind.js --full
Copy the code

Then install PostCSS to handle converting CSS styles:

$ npm install postcss-cli autoprefixer --save-dev
or
$ yarn add postcss-cli autoprefixer --save-dev
Copy the code

These commands will ensure that you are using the latest versions of Tailwind, PostCSS, and Autoprefixer.

Step 4: Configure PostCSS

Run the following command to create a PostCSS configuration file:

$ touch postcss.config.js
Copy the code

Add the following code to the configuration file you just created:

//postcss.config.js
 const tailwindcss = require('tailwindcss');
 module.exports = {
     plugins: [
         tailwindcss('./tailwind.js'),
         require('autoprefixer'),],}Copy the code

Step 5: Update the scripts command in the package.json file

We locate the Package JSON file in the root directory and change the code for the scripts script command to look like this:

"scripts": {
  "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css"."start": "npm run build:style && react-scripts start"."build": "react-scripts build"."test": "react-scripts test"."eject": "react-scripts eject"
},
Copy the code

Step 6: Create a style directory for the CSS

Create a styles directory in the SRC directory to hold your style files.

Then create tailwind. CSS file in the styles directory and index.css file.

The contents of the index. CSS file are as follows:

/ /. /src/styles/index.css 
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Copy the code

Or this:

/ /. /src/styles/index.css
@tailwind base;

@tailwind components;

@tailwind utilities;
Copy the code

Step 7: Import tailwind. CSS

You should remove the index.css and app.css files in the project root directory, and remove the import statements in the index.js and app.js files, respectively.

Now you can import it into the index.js file.

import './styles/tailwind.css';
Copy the code

Step 8: Test tailwind to see if it works

Now, in your app.js file, continue adding the following code:

<div className="text-blue-500">
     TailwindCSS setup
</div>
Copy the code

Your app.js file should look like this:

Now run the local service on your command:

$ yarn start
Copy the code

If your text is blue, everything is set correctly. Congratulations!