Tailwind CSS In React

Tailwind CSS has become a popular choice for developers looking to streamline their styling process while maintaining flexibility and control over design. Integrating Tailwind CSS into a React project allows developers to leverage its utility-first approach, offering a powerful way to create custom designs without writing traditional CSS. In this guide, we will walk you through the steps required to use Tailwind CSS effectively within a React environment.

Table of Content

• introduction
• Prerequisites
• Step 1: Create a React Project
• Step 2: Install Tailwind CSS
• Step 3: Configure Tailwind CSS
• Step 4: Set Up PostCSS Configuration
• Step 5: Add Tailwind Directives to Your CSS
• Step 6: Start Using Tailwind CSS in Your React Project
• Conclusion

Introduction

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build bespoke designs directly in your HTML markup. Unlike other frameworks, it does not come with pre-designed components but instead offers the building blocks needed to craft unique interfaces tailored to specific needs

Prerequisites

Before starting, ensure you have the following installed on your machine:

• Node.js (v16 or later): Download from Node.js Official Website .
• npm : Comes bundled with Node.js.
• Basic Knowledge of React : Familiarity with React concepts will be beneficial.

Step 1: Create a React Project

If you haven’t already created a React project, you can do so using create-react-app. Run the following command:

npx create-react-app my-tailwind-react-app

Replace my-tailwind-react-app with your desired project name. Once the project is created, navigate into the project directory:

cd my-tailwind-react-app

This command sets up a new React project with all the necessary files and configurations.

Step 2: Install Tailwind CSS

Install Tailwind CSS along with its dependencies by running the following command:

npm install -D tailwindcss postcss autoprefixer

After installation, initialize Tailwind CSS by generating the necessary configuration files:

npx tailwindcss init -p

This generates two essential files:

• tailwind.config.js: For configuring Tailwind options.
• postcss.config.js: For PostCSS configuration

Step 3: Configure Tailwind CSS

Open the generated tailwind.config.js file and customize it according to your project requirements. Below is an example configuration:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content property tells Tailwind which files to scan for class names so it can generate only the styles you actually use

Step 4: Set Up PostCSS Configuration

The postcss.config.js file should look like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

This ensures that PostCSS processes your CSS correctly with Tailwind CSS and Autoprefixer.

Step 5: Add Tailwind Directives to Your CSS

Create a new CSS file, for example, src/styles/tailwind.css, and include the following:

/* src/styles/tailwind.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

These directives import the base styles, component styles, and utility classes provided by Tailwind CSS.

Next, import this CSS file into your main application entry point (src/index.js):

import './index.css';

Step 6: Start Using Tailwind CSS in Your React Project

We are going to create a simple React Card Component to demonstrate that Tailwind css works on our application. To do this, we must first open our App.js file, delete the code there, and write the code below.

function App() {
	return (
		<section className="App h-screen w-full flex justify-center items-center bg-purple-500">
			<div className="w-full max-w-md bg-white-800">
				<div
					className="rounded-t-xl bg-white px-6 py-6 md:p-6 text-lg md:text-xl leading-8 
          Md:leading-8 font-semibold"
				>
					<p className="text-purple-900 text-xl md:text-xl font-black text-center pb-2">
						Tailwind CSS
					</p>

					<p
						className="text-indigo-700 text-base md:text-base italic 
          font-normal text-center"
					>
						"A utility-first CSS framework for rapid UI development. "
					</p>
				</div>

				<div
					className="flex items-center space-x-4 p-6 md:px-6 md:py-6 
        bg-gradient-to-tr from-purple-700 to-indigo-700 rounded-b-xl 
        leading-6 font-semibold text-white"
				>
					<div
						className="flex-none w-14 h-14 bg-white rounded-full shadow-2xl 
          items-center justify-center"
					>
						<svg
							height="54"
							preserveAspectRatio="xMidYMid"
							width="54"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 256 153.6"
						>
							<linearGradient id="a" x1="-2.778%" y1="32%" y2="67.556%">
								<stop offset="0" stop-color="#2298bd" />
								<stop offset="1" stop-color="#0ed7b5" />
							</linearGradient>
							<path
								d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.
                733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.
                318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.
                067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.
                434-16.697-9.499-24.401-17.318C174.249 14.743 159.
                725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.
                067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.
                401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0
                 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.
                2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543
                 95.725 76.8 64 76.8z"
								fill="url(#a)"
							/>
						</svg>
					</div>

					<div className="flex-auto text-base md:text-base font-thin">
						Created By
						<br />
						<span className="text-xl md:text-xl text-purple-200 font-black">
							Adam Wathan
						</span>
					</div>
				</div>
			</div>
		</section>
	);
}

export default App;

Preview

Feel free to explore the extensive list of Tailwind CSS classes to style your Tailwind React components efficiently.

Conclusion

By following this guide, you’ve learned how to integrate Tailwind CSS into your React project and start using its utility-first approach to style your components. Tailwind CSS empowers developers to create beautiful, responsive designs quickly and efficiently, making it an excellent choice for modern web development projects.

If you found this guide helpful, consider sharing it with other developers. Happy coding!