Using Tailwind CSS With React
In the previous tutorial you’ve learned about the Tailwind CSS basics and how to setup a basic web project with Tailwind. In this tutorial we’re going to take a look at how to use and configure Tailwind CSS in a React project.
Setting Up The React Project
The first step is to setup the React project by using the create-react-app script in the following way:$ npx create-react-app react-tailwindcss
By using npx we’re able to execute the create-react-app script directly without needing to install it first. The new React project is named react-tailwindcss.
Let’s change into the newly created project folder by using the following command:$ cd react-tailwindcss
Inside this folder you’ll find the basic React starter project template.
Adding Dependencies To The Project
The next step is to add dependencies to the project by using the yarn add command: $ yarn add tailwindcss postcss-cli autoprefixer -D
Creating A Tailwind Configuration File
To further complete the project setup let’s also add a Tailwind CSS configuration file by executing the following command inside the project folder:$ npx tailwind init —full
This command is creating a new file named tailwind.config.js with a basic Tailwind CSS configuration inside.
Configure PostCSS
Tailwind requires a CSS build process. To manage and configure this build process we’re using PostCSS. To be able $ touch postcss.config.js
Insert the following code into the file:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
],
};
The PostCSS build process will make use of two plugins: tailwindcss and autoprefixer.
Injecting Tailwind CSS Into The Project
In the src folder we’re now creating a new subfolder styles. Inside that styles folder create a new file tailwind.css and insert the following lines of code:
@tailwind base;
@tailwind components;
@tailwind utilities;
Here we’re making use of the @tailwind directives to import CSS code from Tailwind’s base, components, and utilities packages.
Build Scripts
Now let’s add a corresponding build script to our package.json file.
First of all let’s take a look at the scripts section which is already available in package.json by default:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Then add the following new entry in this section:
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
This build:css script is associated with the command postcss src/styles/tailwind.css -o src/styles/main.css. This command used the PostCSS CLI to execute the CSS build for file src/styles/tailwind.css. The result of the CSS build is inserted into file src/styles/main.css.
Now the execution of the build:css script can be integrated into the start and build script as well, so that we’re making sure that the CSS build is executed everytime we’re starting the application server:
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
Finally the scripts section should look like the following
"scripts": {
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
},
The CSS build process can now be executed manually by executing:$ yarn build:css
or by starting of the application server by executing:$ yarn start
Using Tailwind CSS In A React Component
Now we’re ready to make use of Tailwind’s CSS classes in our React components, e.g. in App component like you can see in the following:
import React from 'react';
import './styles/main.css';
function App() {
return (
<div class="h-64">
<div class="p-4 m-4 bg-green-600">
<h1 class="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
</div>
<div class="p-4 m-4 bg-green-300 h-full">
<h2 class="text-green-900">Have much fun using Tailwind CSS</h2>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">My Tailwind Button</button>
</div>
</div>
);
}
export default App;
The result should then look like what you can see in the following screenshot:
Advertisement: The Complete JavaScript Course
Check out the great The Complete JavaScript Course: Build a Real-World Project:
The Complete JavaScript Course*
Master JavaScript with the most complete JavaScript course on the market! Includes projects, challenges, final exam, ES6
- You will go all the way from JavaScript beginner to advanced JavaScript developer.
- You will gain a deep and true understanding of how JavaScript works behind the scenes.
* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!