How to use Ant Design with Tailwind CSS in a React Project ?

The integration of Ant Design and Tailwind CSS in a React project presents challenges due to their differing styling conventions. Ant Design offers a feature-rich component library with its own class names, while Tailwind CSS provides a utility-first framework for custom designs. Combining both libraries requires a thoughtful approach to applying their respective styles to the same components, achieving a balance between Ant Design's components and Tailwind CSS's flexible styling capabilities.

Prerequisites:

• React JS
• TailwindCSS

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: Installing Ant Design

npm install antd

Step 4: Installing Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

Step 5: The first command installs Tailwind CSS as a development dependency in your project. The second command generates a default tailwind.config.js file in your project, which you can use to customize your Tailwind CSS styles.

Configuring Tailwind CSS:

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

The content property specifies the files that Tailwind CSS should scan to generate its styles. In this case, it includes all JavaScript and TypeScript files in the src directory.

Now open a file called index.css in your src directory, and add the following code to the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Project structure:

Example 1: Let's see an example code that demonstrates how to use Antdesign with tailwindcss together in a React Project:

import React from "react";
import { Button } from "antd";
import "./App.css";

function App() {
    return (
        <div className=" flex w-screen 
            h-screen flex-col justify-center 
            gap-1 items-center">

            <h1 className="text-green-500 font-bold">
                GeeksforGeeks
            </h1>

            <Button className="bg-[#1677ff]"
                type="primary">
                Primary Button
            </Button>
        </div>
    );
}

export default App;

Step to Run Application: Now start the development server by running the following command:

npm start

Output: App run at http://localhost:3000/