Replies: 3 comments
-
Maybe it could be the other way around. Maintain antd's theme and let tailwind use the colors from antd's calculations? import { theme } from 'antd';
const { getDesignToken } = theme;
const globalToken = getDesignToken(); import { theme } from 'antd';
import type { Config } from 'tailwindcss';
// @ts-ignore
import { AntdTheme } from './src/lib/antd-theme';
const token = theme.getDesignToken(AntdTheme);
console.log(token);
const config = {
darkMode: ['class'],
content: ['./src/**/*.{ts,tsx}'],
prefix: '',
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
},
},
extend: {
colors: {
border: token.blue
},
},
},
plugins: [require('tailwindcss-animate')],
} satisfies Config;
export default config; |
Beta Was this translation helpful? Give feedback.
-
I'm attempting to do this for the first time too. @StringKe's comment seems to be exactly what I'm trying to do, but I was initially a bit confused about where each snippet should be placed. I ended up with the following result in my /** @type {import('tailwindcss').Config} */
import { theme } from "antd";
const { getDesignToken } = theme;
const globalToken = getDesignToken();
const token = theme.getDesignToken(globalToken);
module.exports = {
content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./src/**/*.tsx"],
theme: {
extend: {
colors: {
"antd-red": {
50: token.red1,
100: token.red2,
200: token.red3,
300: token.red4,
400: token.red5,
500: token.red6,
600: token.red7,
700: token.red8,
800: token.red9,
900: token.red10,
},
"antd-volcano": {
50: token.volcano1,
100: token.volcano2,
200: token.volcano3,
300: token.volcano4,
400: token.volcano5,
500: token.volcano6,
600: token.volcano7,
700: token.volcano8,
800: token.volcano9,
900: token.volcano10,
},
"antd-orange": {
50: token.orange1,
100: token.orange2,
200: token.orange3,
300: token.orange4,
400: token.orange5,
500: token.orange6,
600: token.orange7,
700: token.orange8,
800: token.orange9,
900: token.orange10,
},
"antd-gold": {
50: token.gold1,
100: token.gold2,
200: token.gold3,
300: token.gold4,
400: token.gold5,
500: token.gold6,
600: token.gold7,
700: token.gold8,
800: token.gold9,
900: token.gold10,
},
"antd-yellow": {
50: token.yellow1,
100: token.yellow2,
200: token.yellow3,
300: token.yellow4,
400: token.yellow5,
500: token.yellow6,
600: token.yellow7,
700: token.yellow8,
800: token.yellow9,
900: token.yellow10,
},
"antd-lime": {
50: token.lime1,
100: token.lime2,
200: token.lime3,
300: token.lime4,
400: token.lime5,
500: token.lime6,
600: token.lime7,
700: token.lime8,
800: token.lime9,
900: token.lime10,
},
"antd-green": {
50: token.green1,
100: token.green2,
200: token.green3,
300: token.green4,
400: token.green5,
500: token.green6,
600: token.green7,
700: token.green8,
800: token.green9,
900: token.green10,
},
"antd-cyan": {
50: token.cyan1,
100: token.cyan2,
200: token.cyan3,
300: token.cyan4,
400: token.cyan5,
500: token.cyan6,
600: token.cyan7,
700: token.cyan8,
800: token.cyan9,
900: token.cyan10,
},
"antd-blue": {
50: token.blue1,
100: token.blue2,
200: token.blue3,
300: token.blue4,
400: token.blue5,
500: token.blue6,
600: token.blue7,
700: token.blue8,
800: token.blue9,
900: token.blue10,
},
"antd-geekblue": {
50: token.geekblue1,
100: token.geekblue2,
200: token.geekblue3,
300: token.geekblue4,
400: token.geekblue5,
500: token.geekblue6,
600: token.geekblue7,
700: token.geekblue8,
800: token.geekblue9,
900: token.geekblue10,
},
"antd-purple": {
50: token.purple1,
100: token.purple2,
200: token.purple3,
300: token.purple4,
400: token.purple5,
500: token.purple6,
600: token.purple7,
700: token.purple8,
800: token.purple9,
900: token.purple10,
},
"antd-magenta": {
50: token.magenta1,
100: token.magenta2,
200: token.magenta3,
300: token.magenta4,
400: token.magenta5,
500: token.magenta6,
600: token.magenta7,
700: token.magenta8,
800: token.magenta9,
900: token.magenta10,
},
"antd-gray": {
50: token.gray1,
100: token.gray2,
200: token.gray3,
300: token.gray4,
400: token.gray5,
500: token.gray6,
600: token.gray7,
700: token.gray8,
800: token.gray9,
900: token.gray10,
},
},
},
},
plugins: [],
}; Very big snippet but might save people some time. It seems to be working, but I haven't tried modifying Ant Design's tokens and checking if it actually makes a difference in tailwind's classes. |
Beta Was this translation helpful? Give feedback.
-
we really need a ant-design-tailwindcss-adapter 🥲 |
Beta Was this translation helpful? Give feedback.
-
since I'm using Tailwind I was trying to use the same color used in the Tailwind config, I thought about exposing the Tailwind theme via CSS variable and passing it via the provider but it doesn't seem working, is there a way to achieve this?
Beta Was this translation helpful? Give feedback.
All reactions