Combining TailwindCSS with Ant Design for Super Fast (And Simple) UI Development

I really enjoy developing with Ant Design. Yes, I know that it is a rather enterprise-y component library to work with when developing UIs in React, but I think that it has one of the fastest time-to-value as compared to any other component library, due to the sheer.

In this blog post, I will give you a quick walkthrough of how to combine the two tools together, and also give some opinionated tips on working with them.

Install The Packages

Lets reach for our trusty package manager and install the following packages for each tool.

# For Ant Design
npm i antd

# For Tailwind
npm i -D tailwindcss postcss autoprefixer

You don't really need autoprefixer for a quick and dirty setup, but it is always good practice to add in vendor prefixes for your CSS production bundle.

Create PostCSS Configuration

Setting the configuration for PostCSS depends on the bunding setup that you are currently using. Refer to the list of bundlers documented on the PostCSS setup docs, and if your bundler isn't there then you're going to have to refer to your bundler's documentation for setting up the processing pipeline. If all else fails and there are no docs, or if you are skipping bundlers altogether, consider using the postcss-cli tool for bundling css through some npm scripts.

Your PostCSS config should look something like this (depending on whether you're coding in CommonJS or ES modules):

import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

export default {
  plugins: [tailwindcss, autoprefixer]
};

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")]
};

Create TailwindCSS Config

Run the following command to create a boilerplate Tailwind config, according to their PostCSS guide:

npx tailwindcss init

Then update the generated config file to the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  corePlugins: {preflight: false},
  theme: {
    extend: {},
  },
  plugins: [],
}

The 2 important parts are content, which dictates the glob pattern where css classes are purged, and the corePlugins.preflight, which disables the base style resetting behaviour that Tailwind does. We disable the preflight style resetting so that it does not intefere with the default styles that Ant Design will load.

We will then update our app's css file with the following:

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

/* Override base SVG style to work with Ant Design if using external icon sets */
svg {
  vertical-align: initial;
}

The deviation from normal setup is the addition of the global svg rule, which will reset the behaviour of Ant Design's icon behaviour so that SVGs will be aligned correctly in the middle. This additional rule is only required if using external icon packages like feather icons. Credit and reference for this fix is from this StackOverflow thread.

Load Ant Design into your App

We're almost there, we just need to adjust our app.jsx (or whatever the file is called) entrypoint to load up Ant Design's styles.

// app.jsx
import "antd/dist/reset.css";
import { Button } from "antd";

const App = ()=>(
  <Button type="default" className="bg-green-500">Test Integration</Button>
);

export default App;

You should now have a green color button!

Protip: Use Ant Design's Theme Editor for ⚡Super Speed Theming⚡

The documentation for customizing the Ant Design theme is here, which is now token-based in Ant Design v5.

Export the token file generated in their theme editor and import it into your ConfigProvider:

import { Button, ConfigProvider } from 'antd';
import React from 'react';
import theme from "./assets/theme.json";

const App: React.FC = () => (
  <ConfigProvider theme={theme}>
    <Button />
  </ConfigProvider>
);

export default App;

Wrapup

I think that this is one of the fastest ways to get started with a new frontend project, and I recently did the whole process again on a fresh project (using vite for bundling), and I think that trying to target and customize individual Ant Design components is much more hassle than it is worth. Just use Tailwind and inject the classes into the rendered component and you're done for the day.