@modyqyw/tailwind-presets

English | 简体中文

Opinionated TailwindCSS v3 presets.

Adaptations of TailwindCSS v3 to different UI libraries / miniprogram are provided.

Usage

1npm install @modyqyw/tailwind-presets

Then update your TailwindCSS config.

base

This preset extends the default configuration of TailwindCSS. View Preset

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

When might I use this preset?

The TailwindCSS default configuration is sufficient for most cases. However, in situations where a high degree of customization is required, heavy use of [xxx] can be distracting and reduce code cleanliness.

This preset considers these situations. You should be able to reduce the use of [xxx] after using this preset.

Recommend WindiCSS and UnoCSS besides TailwindCSS.

I would like to know what this preset has probably done.

• Extend columns.
• Extend spacing.
• Extend aspect-ratio.
• Extend blur.
• Extend brightness.
• Extend borderRadius.
• Extend borderWidth.
• Extend contrast.
• Extend hueRotate.
• Extend flexBasis.
• Extend flexGrow.
• Extend flexShrink.
• Extend fontSize.
• Extend fontWeight.
• Extend gridColumn.
• Extend gridColumnEnd.
• Extend gridColumnStart.
• Extend gridRow.
• Extend gridRowStart.
• Extend gridRowEnd.
• Extend gridTemplateColumns.
• Extend gridTemplateRows.
• Extend height.
• Extend inset.
• Extend lineHeight.
• Extend maxHeight.
• Extend maxWidth.
• Extend minHeight.
• Extend minWidth.
• Extend opacity.
• Extend order.
• Extend outlineOffset.
• Extend outlineWidth.
• Extend ringOffsetWidth.
• Extend ringWidth.
• Extend rotate.
• Extend saturate.
• Extend scale.
• Extend skew.
• Extend textDecorationThickness.
• Extend textUnderlineOffset.
• Extend transitionDelay.
• Extend transitionDuration.
• Extend translate.
• Extend width.
• Extend zIndex.

ant-design

This preset provides configurations related to Ant Design. View Preset

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

When might I use this preset?

This preset will be useful if you are using some UI libraries following Ant Design (e.g. antd and ant-design-vue) and TailwindCSS.

I would like to know what this preset has probably done.

• Set darkMode to class.
• Set safelist to ['dark'].
• Replace screens.
• Extend colors.
• Extend backgroundColor.
• Extend borderColor.
• Extend fontFamily.
• Extend textColor.
• Extend boxShadow.

Extra Configs

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.

TailwindCSS preflight 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;

element-plus

This preset provides configurations related to element-plus. View Preset

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

When might I use this preset?

This preset will be useful if you are using element-plus and TailwindCSS.

I would like to know what this preset has probably done.

• Set darkMode to class.
• Set safelist to ['dark'].
• Replace screens.
• Extend colors.
• Extend backgroundColor.
• Extend borderColor.
• Extend textColor.
• Extend fontFamily.
• Extend boxShadow.

Extra Configs

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

TailwindCSS preflight 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;

miniprogram

This preset extends the default configuration of TailwindCSS for miniprogram. View Preset

1const { base, miniprogramBase, miniprogramScreens, miniprogramSeparator } = require('@modyqyw/tailwind-presets');
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5  content: [...],
6  presets: [
7    base,
8    miniprogramBase,
9    miniprogramScreens,
10    miniprogramSeparator,
11  ],
12};

Note: Be sure to include page in baseSelectors if you use another preset and that preset can accept baseSelectors for configuration (this is a default behavior), as miniprogram may not recognize the :root style.

When might I use this preset?

This preset will be useful if you are developing miniprogram with TailwindCSS.

I would like to know what this preset has probably done.

• (screens) Disable screens.
• (separator) Replace separator.
• (base) Extend spacing.
• (base) Extend borderRadius.
• (base) Extend borderWidth.
• (base) Extend flexBasis.
• (base) Extend height.
• (base) Extend inset.
• (base) Extend translate.
• (base) Extend width.

Extra Configs

TailwindCSS base generated style code contains selectors * and tags that are not supported by miniprogram. 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/preflight1.css */
2button,
3button::after {
4  all: unset;
5}
6
7button {
8  -webkit-tap-highlight-color: transparent;
9  box-sizing: border-box;
10}

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

1/* styles/preflight2.css */
2html,
3page {
4  /* Add !important in miniprogram to make sure it works */
5  font-size: var(--font-size, 16px) !important;
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;

1// postcss config file, e.g. .postcssrc.cjs
2// replace selectors in @tailwind base
3module.exports = {
4  plugins: {
5    'tailwindcss/nesting': {},
6    tailwindcss: {},
7    'postcss-preset-env': {
8      stage: 3,
9      features: { 'nesting-rules': false },
10    },
11    'postcss-selector-replace': {
12      before: ['html', 'body', 'img', 'span', /^a$/, '*'],
13      after: [
14        'html,page',
15        'body,page',
16        'img,image',
17        'span,text',
18        'a,functional-page-navigator,navigator',
19        'html,body,page,cover-image,cover-view,match-media,movable-area,movable-view,scroll-view,swiper,swiper-item,view,icon,progress,rich-text,text,button,checkbox,checkbox-group,editor,form,input,label,picker,picker-view,picker-view-column,radio,radio-group,slider,switch,textarea,functional-page-navigator,navigator,audio,camera,image,live-player,live-pusher,video,voip-room,map,canvas,ad,ad-custom,official-account,open-data,web-view,navigation-bar,page-meta',
20      ],
21    },
22  },
23};

Note: You still can't use classes with !, :, and other classes with special characters. To break these restrictions, check out unplugin-uni-app-tailwind, mini-program-tailwind, [unocss-preset-uni](https://github.com/zguolee/unocss- preset-uni) and unocss-preset-weapp.

Translated with www.DeepL.com/Translator (free version)

easy

This preset provides configurations related to miniprogram. View Preset

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

When might I use this preset?

This preset will be useful if you are developing easy mode with TailwindCSS.

I would like to know what this preset has probably done.

• Extend fontSize.

Extra Configs

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/preflight1.css */
2button,
3button::after {
4  all: unset;
5}
6
7button {
8  -webkit-tap-highlight-color: transparent;
9  box-sizing: border-box;
10}

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;