Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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:

How to use Antdesign with tailwindcss together in a React Project

How to use Antdesign with tailwindcss together in a React Project

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

Javascript




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/

How to use Antdesign with tailwindcss together in a React Project

Output



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads