vicious-gold•3mo ago

ant design with tailwind

i make project with Vite + ant design + rest api + custom auth how to add tailwind

2 Replies

Hi @kambing. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add Tailwind CSS to your Vite + Ant Design + REST API + custom auth project, you can follow these steps, which are consistent with the approaches shown in the Refine documentation and blog posts: 1. Install Tailwind CSS and dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js in your project root. 2. Configure Tailwind to scan your files: Edit your tailwind.config.js to include your source files. For a Vite + React project, it typically looks like:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

If you use Ant Design components, you do not need to add their paths to Tailwind's content array, but you can if you want to scan custom Ant Design wrappers. 3. Add Tailwind directives to your CSS: Create or edit your main CSS file (e.g., src/index.css or src/App.css) and add:

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

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

4. Import the CSS file in your entry point: In your src/main.tsx or src/index.tsx, import the CSS file:

import './index.css'; // or './App.css'

import './index.css'; // or './App.css'

5. Use Tailwind classes in your components: You can now use Tailwind utility classes alongside Ant Design components in your JSX. --- Note:
- Ant Design and Tailwind CSS can be used together. Tailwind will not interfere with Ant Design's styles, but you may want to use Tailwind for layout, spacing, and custom utility classes, while relying on Ant Design for complex UI components. - If you want to customize Ant Design's theme, you can do so using the ConfigProvider and RefineThemes as shown in the Refine docs, and still use Tailwind for additional styling needs Adding UI to Router Examples. --- This approach is validated by multiple Refine blog posts and guides, such as those integrating Tailwind with other UI libraries and Vite projects Adding Tailwind CSS for styling, daisyUI Installation, and Building a React Admin Dashboard with Tremor Library. If you need to add more advanced theming or want to use Tailwind with other UI libraries, the process is similar. Let me know if you need a sample project structure or further code examples! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@344849694729568259> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ant design with tailwind

Did you find this page helpful?