how to install and use tailwind css in react js?
April 13, 2023Hi Friends 👋,
Welcome To aGuideHub!
To install and use tailwind css in React js, you have to use the npm package manager that is how you can install the Tailwind css library into your project.
Today, I am going to show you, how to install and use tailwind css in react js.
Table of contents
- Set up the React project.
- Install Tailwind CSS Module.
- Create Tailwind Config File.
- Add Tailwind Directives.
- Compile Tailwind CSS.
Step 1: Set up the React project.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app react-tailwind
cd react-tailwind
npm start
Step 2: Install Tailwind CSS Module.
Next, you need to type and execute the given command to install the tailwind css.
npm install -D tailwindcss
npm install @heroicons/react
npm install @headlessui/reactStep 3: Create Tailwind Config File
In this step, we will create the tailwind.config.js file; therefore run the following command to generate the tailwind config file.
npx tailwindcss init
Inside tailwind.config.js we need to specify the path to our React template files by adding the following configuration setting:
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
}Step 4: Add Tailwind Directives.
Add the following Tailwind CSS directives into file App.css.
@tailwind base;
@tailwind components;
@tailwind utilities;Step 5: Compile Tailwind CSS.
Further, run the following command to run the tailwind CLI to scan the React template files for classes and build CSS.
npx tailwindcss -i ./src/App.css -o ./src/styles/output.css --watchReact Tailwind css example.
Replace the default code in src/App.js with the following implementation.
App.js
import './App.css'
import React from 'react'
function App() {
return (
<div
class={`h-screen w-full flex items-center justify-center bg-gray-300 flex-col`}
>
<div class="max-w-sm rounded overflow-hidden bg-gray-100 p-5 rounded-lg mt-4 text-white dark:bg-gray-900">
<img
class="w-full"
src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase"
/>
<div class="px-6 py-4">
<div class="text-gray-800 dark:text-gray-200 font-bold text-xl mb-2">
The Hotel Management
</div>
<p class="text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus quia, nulla! Maiores et perferendis eaque,
exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
#photography
</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
#travel
</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
#winter
</span>
</div>
</div>
</div>
)
}
export default AppCheck the output of the above code example.
Here, we are provided code sandbox links for the above program install and use tailwind css in React js. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
