Installing Tailwind CSS In React

Introduction

Tailwind CSS is a pure CSS utility framework that offers a minimal-level layout solution to customize your designs with ease by implementing UI designs in HTML. It has gained popularity because of convenience that comes along with it given the current standards of technology. Well, in this article, let’s take our time and guide you through the process of merging Tailwind CSS to a React project.

Prerequisites

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

• Node.js (v12.13.0 or higher)
• npm (v6.12.0 or higher) or Yarn (v1.22.0 or higher)

Step 1: Setting Up a New React Project

First, let’s create a new React project. You can use Create React App to set up the project quickly.

npx create-react-app my-project
cd my-tailwind-app

Step 2: Installing Tailwind CSS

Next, we need to install Tailwind CSS and its dependencies.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The npx tailwindcss init -p command creates a tailwind.config.js file and a postcss.config.js file in your project. The tailwind.config.js file is where you can customize your Tailwind setup.

Step 3: Configuring Tailwind CSS

In the tailwind.config.js file, configure the paths to all your template files so Tailwind can tree-shake unused styles in production.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Adding Tailwind Directives to CSS

Create a new CSS file (if you don’t have one already) for Tailwind’s base, components, and utilities. Typically, this file is located at src/index.css.

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Ensure this CSS file is imported in your src/index.js or src/index.tsx file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Step 5: Using Tailwind CSS in Your Components

Now that Tailwind CSS is set up, you can start using its utility classes in your React components. Here’s an example of a simple component using Tailwind CSS:

// src/App.js
import React from 'react';

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <h1 className="text-2xl font-bold mb-4">Hello, Tailwind CSS!</h1>
        <p className="text-gray-700">This is a simple example of using Tailwind CSS in a React project.</p>
      </div>
    </div>
  );
}

export default App;

Step 6: Building for Production

Tailwind CSS includes many utility classes by default, which can lead to a large CSS file. However, Tailwind provides a way to purge unused CSS, which significantly reduces the file size.

By default, Create React App runs postcss and applies the configuration in postcss.config.js. With the content paths specified in tailwind.config.js, Tailwind will automatically purge unused styles in production builds.

To build your project for production, simply run:

npm run build

This will create an optimized build of your React application, including a minified CSS file with only the styles used in your project.

Conclusion

Compiling React and Tailwind CSS together improves the flow of the development by enabling the use of utility classes right inside the component without crossing the context to rewrite styles. To run and utilize Tailwind CSS in a React application, try the following steps: Following the steps above, you can incorporate Tailwind CSS in your React application successfully and use it to enhance your application design and user interface.

Frequently Asked Questions