Ant Design is a popular UI library for React applications that provides a set of customizable and responsive components. Tailwind CSS, on the other hand, is a utility-first CSS framework that provides a low-level set of CSS classes to help developers quickly build custom designs. While both libraries are useful in their own ways, there may be cases where we want to use Ant Design components with Tailwind CSS styles to take advantage of the best of both worlds.
The problem that we face when using Ant Design and Tailwind CSS together is how to apply both libraries’ styles to the same components. Ant Design components come with their own set of class names, while Tailwind CSS classes have a different naming convention and structure.
In this article, we’ll explore how to use these two systems together in a React project to achieve both a rich component library and flexible styling capabilities.
Create ReactJS Application: To get started, we need to create a new React project. Open your terminal and run the following command to create a new React project using the create-react-app command line tool (Replace my-project with the name of your project):
npx create-react-app my-project
Next, navigate to the project directory by running the following command:
cd my-project
Installing Ant Design
To install Ant Design, run the following command:
npm install antd
Installing Tailwind CSS
To install Tailwind CSS, run the following commands:
npm install -D tailwindcss npx tailwindcss init
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.
Now that we have installed Ant Design and Tailwind CSS, we need to configure our project to use them together.
Configuring Tailwind CSS
Open your tailwind.config.js file and add the following code to the file:
Javascript
/** @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:
CSS
@tailwind base; @tailwind components; @tailwind utilities; |
Project structure:
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:
- App.js
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"> neveropen </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
This will launch the React application in your browser at http://localhost:3000/.
Output:
How to use Antdesign with tailwindcss together in a React Project
In this example, we import the Button component from Ant Design and use it in our component’s JSX code. We also use Tailwind CSS classes to style our component, such as Tailwind CSS class called bg-[#1677ff] which sets the background color of the button to a shade of blue and flex class to enable flexbox layout, the justify-center class to center our content horizontally, items-center class to center our content vertically and the gap-1 class to add some vertical spacing between our elements.
By following these steps, you’ll be able to use both Ant Design and Tailwind CSS in your React project, giving you access to both Ant Design’s comprehensive library of pre-built components and Tailwind CSS’s flexible utility-first CSS framework.
