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:
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:
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" > w3wiki </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/
Contact Us