tailwind-extensions

English | 简体中文

Opinionated TailwindCSS v3 extensions. Requires node >= 14.18.

• TailwindCSS v3 enhanced preset for default config.
• TailwindCSS v3 and Ant Design compat preset
• TailwindCSS v3 and element-plus compat preset
• TailwindCSS v3 and miniprogram compat preset
• TailwindCSS v3 and easy mode compat preset

Usage

1npm install tailwind-extensions

Then update your TailwindCSS config.

Presets

basePreset

This preset enhances TailwindCSS default config of TailwindCSS. With this preset you can reduce the use of arbitrary values to keep your attention focused and improve code cleanliness.

1const { basePreset } = require('tailwind-extensions');
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5  content: [], // set your content
6  presets: [basePreset],
7};

Check out UnoCss if you have a stronger need for arbitrary values.

antDesignPreset

This preset provides Ant Design v5 colors compat config.

1const { basePreset, antDesignPreset } = require('tailwind-extensions');
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5  content: [], // set your content
6  presets: [
7    basePreset,
8    antDesignPreset({
9      // Adjust the value you need
10      /** base */
11      baseSelectors: [':root'],
12      baseMediaQuery: '',
13
14      basePrimary: '#1677ff',
15      baseSecondary: '#666666',
16      baseSuccess: '#52c41a',
17      baseWarning: '#faad14',
18      baseError: '#ff4d4f',
19      baseDanger: '#ff4d4f',
20      baseInfo: '#1677ff',
21
22      baseBg: '#ffffff',
23      baseMaskBg: 'rgba(0, 0, 0, 0.45)',
24      baseDisabledBg: 'rgba(0, 0, 0, 0.04)',
25
26      baseBorder: '#d9d9d9',
27
28      baseText: 'rgba(0, 0, 0, 0.85)',
29      basePrimaryText: 'rgba(0, 0, 0, 0.85)',
30      baseSecondaryText: 'rgba(0, 0, 0, 0.45)',
31      baseDisabledText: 'rgba(0, 0, 0, 0.25)',
32
33      baseBoxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
34
35      /** dark */
36      darkSelectors: ['.dark'],
37      darkMediaQuery: '',
38
39      darkPrimary: '#1668dc',
40      darkSecondary: '#5a5a5a',
41      darkSuccess: '#49aa19',
42      darkWarning: '#d89614',
43      darkError: '#dc4446',
44      darkDanger: '#dc4446',
45      darkInfo: '#1668dc',
46
47      darkBg: '#141414',
48      darkMaskBg: 'rgba(0, 0, 0, 0.45)',
49      darkDisabledBg: 'rgba(255, 255, 255, 0.08)',
50
51      darkBorder: '#434343',
52
53      darkText: 'rgba(255, 255, 255, 0.85)',
54      darkPrimaryText: 'rgba(255, 255, 255, 0.85)',
55      darkSecondaryText: 'rgba(255, 255, 255, 0.45)',
56      darkDisabledText: 'rgba(255, 255, 255, 0.3)',
57
58      darkBoxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
59    }),
60  ],
61};

When using this preset, you need to control when to add class="dark" to the page container element. usehooks-ts useDarkMode and VueUse useDark are recommended.

@tailwind base styles may conflict with the styles associated with the Ant Design specification. Please refer to the example below for adjustments.

1// project entry main.ts
2
3// custom preflight 1
4import './styles/preflight1.css';
5
6// third-party preflight
7import 'modern-normalize';
8
9// TailwindCSS base
10import './styles/tailwind-base.css';
11
12// custom preflight 2
13import './styles/preflight2.css';
14
15// antd preflight styles
16import 'antd/dist/reset.css';
17
18// TailwindCSS components + utilities
19// maybe override antd / ant-design-vue preflight if move TailwindCSS base here
20import './styles/tailwind.css';
21
22// any other global styles you need
23import './styles/global.css';

1/* styles/tailwind-base.css */
2@tailwind base;

1/* styles/preflight2.css */
2html,
3page {
4  font-size: var(--font-size, 16px);
5  line-height: 1.5;
6  -webkit-font-smoothing: antialiased;
7  -moz-osx-font-smoothing: grayscale;
8}

1/* styles/tailwind.css */
2@tailwind components;
3@tailwind utilities;

antDesignV4Preset

This preset provides Ant Design v4 colors compat config.

1const { basePreset, antDesignV4Preset } = require('tailwind-extensions');
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5  content: [], // set your content
6  presets: [
7    basePreset,
8    antDesignV4Preset({
9      // Adjust the value you need
10      /** base */
11      baseSelectors: [':root'],
12      baseMediaQuery: '',
13
14      basePrimary: '#1890ff',
15      baseSecondary: '#666666',
16      baseSuccess: '#52c41a',
17      baseWarning: '#faad14',
18      baseError: '#f5222d',
19      baseDanger: '#f5222d',
20      baseInfo: '#1890ff',
21
22      baseBg: '#ffffff',
23      baseMaskBg: 'rgba(0, 0, 0, 0.45)',
24      baseDisabledBg: '#f5f5f5',
25
26      baseBorder: '#d9d9d9',
27
28      baseText: 'rgba(0, 0, 0, 0.85)',
29      basePrimaryText: 'rgba(0, 0, 0, 0.85)',
30      baseSecondaryText: 'rgba(0, 0, 0, 0.45)',
31      baseDisabledText: 'rgba(0, 0, 0, 0.25)',
32
33      baseBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
34
35      /** dark */
36      darkSelectors: ['.dark'],
37      darkMediaQuery: '',
38
39      darkPrimary: '#177ddc',
40      darkSecondary: '#5a5a5a',
41      darkSuccess: '#49aa19',
42      darkWarning: '#d89614',
43      darkError: '#d32029',
44      darkDanger: '#d32029',
45      darkInfo: '#177ddc',
46
47      darkBg: '#141414',
48      darkMaskBg: 'rgba(0, 0, 0, 0.45)',
49      darkDisabledBg: 'rgba(255, 255, 255, 0.08)',
50
51      darkBorder: '#434343',
52
53      darkText: 'rgba(255, 255, 255, 0.85)',
54      darkPrimaryText: 'rgba(255, 255, 255, 0.85)',
55      darkSecondaryText: 'rgba(255, 255, 255, 0.45)',
56      darkDisabledText: 'rgba(255, 255, 255, 0.3)',
57
58      darkBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2)',
59    }),
60  ],
61};

When using this preset, you need to control when to add class="dark" to the page container element. usehooks-ts useDarkMode and VueUse useDark are recommended.

@tailwind base styles may conflict with the styles associated with the Ant Design specification. Please refer to the example below for adjustments.

1// project entry main.ts
2
3// custom preflight 1
4import './styles/preflight1.css';
5
6// third-party preflight
7import 'modern-normalize';
8
9// TailwindCSS base
10import './styles/tailwind-base.css';
11
12// custom preflight 2
13import './styles/preflight2.css';
14
15// antd styles
16import 'antd/dist/antd.min.css';
17// import 'antd/dist/antd.variable.min.css';
18
19// ant-design-vue styles
20import 'ant-design-vue/dist/antd.min.css';
21// import 'ant-design-vue/dist/antd.variable.min.css';
22
23// TailwindCSS components + utilities
24// maybe override antd / ant-design-vue preflight if move TailwindCSS base here
25import './styles/tailwind.css';
26
27// any other global styles you need
28import './styles/global.css';

1/* styles/tailwind-base.css */
2@tailwind base;

1/* styles/preflight2.css */
2html,
3page {
4  font-size: var(--font-size, 16px);
5  line-height: 1.5;
6  -webkit-font-smoothing: antialiased;
7  -moz-osx-font-smoothing: grayscale;
8}

1/* styles/tailwind.css */
2@tailwind components;
3@tailwind utilities;

elementPlusPreset

This preset provides element-plus colors compat config.

1const { basePreset, elementPlusPreset} = require('tailwind-extensions');
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5  content: [], // set your content
6  presets: [
7    basePreset,
8    elementPlusPreset({
9      // Adjust the value you need
10      /** base */
11      baseSelectors: [':root'],
12      baseMediaQuery: '',
13
14      basePrimary: '#409eff',
15      baseSecondary: '#909399',
16      baseSuccess: '#67c23a',
17      baseWarning: '#e6a23c',
18      baseError: '#f56c6c',
19      baseDanger: '#f56c6c',
20      baseInfo: '#909399',
21
22      baseFill: '#f0f2f5',
23      baseDarkerFill: '#e6e8eb',
24      baseDarkFill: '#ebedf0',
25      baseLightFill: '#f5f7fa',
26      baseLighterFill: '#fafafa',
27      baseExtraLightFill: '#fafcff',
28      baseBlankFill: '#ffffff',
29
30      baseText: '#303133',
31      basePrimaryText: '#303133',
32      baseRegularText: '#606266',
33      baseSecondaryText: '#909399',
34      basePlaceholderText: '#a8abb2',
35      baseDisabledText: '#c0c4cc',
36
37      baseBg: '#ffffff',
38      basePageBg: '#f2f3f5',
39      baseOverlayBg: '#ffffff',
40      baseMaskBg: 'rgba(0, 0, 0, 0.5)',
41      baseDisabledBg: '#f5f7fa',
42
43      baseBorder: '#dcdfe6',
44      baseDarkerBorder: '#cdd0d6',
45      baseDarkBorder: '#d4d7de',
46      baseLightBorder: '#e4e7ed',
47      baseLighterBorder: '#ebeef5',
48      baseExtraLightBorder: '#f2f6fc',
49
50      baseBoxShadow: '0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)',
51
52      /** dark */
53      darkSelectors: ['.dark'],
54      darkMediaQuery: '',
55
56      darkPrimary: '#409eff',
57      darkSecondary: '#909399',
58      darkSuccess: '#67c23a',
59      darkWarning: '#e6a23c',
60      darkError: '#f56c6c',
61      darkDanger: '#f56c6c',
62      darkInfo: '#909399',
63
64      darkFill: '#303030',
65      darkDarkerFill: '#424243',
66      darkDarkFill: '#39393a',
67      darkLightFill: '#262727',
68      darkLighterFill: '#1d1d1d',
69      darkExtraLightFill: '#191919',
70      darkBlankFill: 'transparent',
71
72      darkText: '#e5eaf3',
73      darkPrimaryText: '#e5eaf3',
74      darkRegularText: '#cfd3dc',
75      darkSecondaryText: '#a3a6ad',
76      darkPlaceholderText: '#8d9095',
77      darkDisabledText: '#6c6e72',
78
79      darkBg: '#141414',
80      darkPageBg: '#0a0a0a',
81      darkOverlayBg: '#1d1e1f',
82      darkMaskBg: 'rgba(0, 0, 0, 0.5)',
83      darkDisabledBg: 'transparent',
84
85      darkBorder: '#4c4d4f',
86      darkDarkerBorder: '#636466',
87      darkDarkBorder: '#58585b',
88      darkLightBorder: '#414243',
89      darkLighterBorder: '#363637',
90      darkExtraLightBorder: '#2b2b2c',
91
92      darkBoxShadow: '0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72)',
93    }),
94  ],
95};

When using this preset, you need to control when to add class="dark" to the page container element. VueUse useDark is recommended.

@tailwind base styles may conflict with the element-plus styles. Please refer to the example below for adjustments.

1// project entry main.ts
2
3// custom preflight 1
4import './styles/preflight1.css';
5
6// third-party preflight
7import 'modern-normalize';
8
9// TailwindCSS base
10import './styles/tailwind-base.css';
11
12// custom preflight 2
13import './styles/preflight2.css';
14
15// element-plus styles
16import 'element-plus/dist/index.css';
17
18// TailwindCSS components + utilities
19// maybe override element-plus preflight if move TailwindCSS base here
20import './styles/tailwind.css';
21
22// any other global styles you need
23import './styles/global.css';

1/* styles/tailwind-base.css */
2@tailwind base;

1/* styles/preflight2.css */
2html,
3page {
4  font-size: var(--font-size, 16px);
5  line-height: 1.5;
6  -webkit-font-smoothing: antialiased;
7  -moz-osx-font-smoothing: grayscale;
8}

1/* styles/tailwind.css */
2@tailwind components;
3@tailwind utilities;

miniprogramBasePreset

This preset enhances TailwindCSS default config of TailwindCSS, providing key-value pairs related to rpx, only for miniprogram.

1const { basePreset, miniprogramBasePreset } = require('tailwind-extensions');
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5  content: [], // set your content
6  presets: [
7    basePreset,
8    miniprogramBasePreset,
9  ],
10};

Be sure to include page in baseSelectors if you use another preset and that preset can accept baseSelectors for configuration, as miniprogram may not recognize the :root style.

@tailwind base styles cannot run in miniprogram. Please use mini-program-tailwind, @uni-helper/vite-plugin-uni-tailwind or others to deal with it.

easyPreset

This preset provides easy mode compat config.

1const { basePreset, easyPreset } = require('tailwind-extensions');
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5  content: [], // set your content
6  presets: [
7    basePreset,
8    easyPreset({
9      selectors: ['.easy'],
10      mediaQuery: '',
11      fontSize: '24px',
12    }),
13  ],
14};

When using this preset, you need to control when to add class="easy" to the page container element. Refer to usehooks-ts useDarkMode and VueUse useDark.

To make sure the preset takes effect, please refer to the example below for adjustments.

1// project entry main.ts
2
3// custom preflight 1
4import './styles/preflight1.css';
5
6// third-party preflight
7import 'modern-normalize';
8
9// TailwindCSS base
10import './styles/tailwind-base.css';
11
12// custom preflight 2
13import './styles/preflight2.css';
14
15// UI library styles
16// import 'xx/yy.css';
17
18// TailwindCSS base + components + utilities
19// maybe override UI library preflight if move TailwindCSS base here
20import './styles/tailwind.css';
21
22// any other global styles you need
23import './styles/global.css';

1/* styles/tailwind-base.css */
2@tailwind base;

1/* styles/preflight2.css */
2html,
3page {
4  /* Should add !important in miniprogram to make sure it works */
5  font-size: var(--font-size, 16px);
6  line-height: 1.5;
7  -webkit-font-smoothing: antialiased;
8  -moz-osx-font-smoothing: grayscale;
9}

1/* styles/tailwind.css */
2@tailwind components;
3@tailwind utilities;

Sponsors