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

npm 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.

const { basePreset } = require('tailwind-extensions');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [], // set your content
  presets: [basePreset],
};

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

antDesignPreset

This preset provides Ant Design v5 colors compat config.

const { basePreset, antDesignPreset } = require('tailwind-extensions');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [], // set your content
  presets: [
    basePreset,
    antDesignPreset({
      // Adjust the value you need
      /** base */
      baseSelectors: [':root'],
      baseMediaQuery: '',

      basePrimary: '#1677ff',
      baseSecondary: '#666666',
      baseSuccess: '#52c41a',
      baseWarning: '#faad14',
      baseError: '#ff4d4f',
      baseDanger: '#ff4d4f',
      baseInfo: '#1677ff',

      baseBg: '#ffffff',
      baseMaskBg: 'rgba(0, 0, 0, 0.45)',
      baseDisabledBg: 'rgba(0, 0, 0, 0.04)',

      baseBorder: '#d9d9d9',

      baseText: 'rgba(0, 0, 0, 0.85)',
      basePrimaryText: 'rgba(0, 0, 0, 0.85)',
      baseSecondaryText: 'rgba(0, 0, 0, 0.45)',
      baseDisabledText: 'rgba(0, 0, 0, 0.25)',

      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)',

      /** dark */
      darkSelectors: ['.dark'],
      darkMediaQuery: '',

      darkPrimary: '#1668dc',
      darkSecondary: '#5a5a5a',
      darkSuccess: '#49aa19',
      darkWarning: '#d89614',
      darkError: '#dc4446',
      darkDanger: '#dc4446',
      darkInfo: '#1668dc',

      darkBg: '#141414',
      darkMaskBg: 'rgba(0, 0, 0, 0.45)',
      darkDisabledBg: 'rgba(255, 255, 255, 0.08)',

      darkBorder: '#434343',

      darkText: 'rgba(255, 255, 255, 0.85)',
      darkPrimaryText: 'rgba(255, 255, 255, 0.85)',
      darkSecondaryText: 'rgba(255, 255, 255, 0.45)',
      darkDisabledText: 'rgba(255, 255, 255, 0.3)',

      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)',
    }),
  ],
};

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.

// project entry main.ts

// custom preflight 1
import './styles/preflight1.css';

// third-party preflight
import 'modern-normalize';

// TailwindCSS base
import './styles/tailwind-base.css';

// custom preflight 2
import './styles/preflight2.css';

// antd preflight styles
import 'antd/dist/reset.css';

// TailwindCSS components + utilities
// maybe override antd / ant-design-vue preflight if move TailwindCSS base here
import './styles/tailwind.css';

// any other global styles you need
import './styles/global.css';

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

/* styles/preflight2.css */
html,
page {
  font-size: var(--font-size, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* styles/tailwind.css */
@tailwind components;
@tailwind utilities;

antDesignV4Preset

This preset provides Ant Design v4 colors compat config.

const { basePreset, antDesignV4Preset } = require('tailwind-extensions');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [], // set your content
  presets: [
    basePreset,
    antDesignV4Preset({
      // Adjust the value you need
      /** base */
      baseSelectors: [':root'],
      baseMediaQuery: '',

      basePrimary: '#1890ff',
      baseSecondary: '#666666',
      baseSuccess: '#52c41a',
      baseWarning: '#faad14',
      baseError: '#f5222d',
      baseDanger: '#f5222d',
      baseInfo: '#1890ff',

      baseBg: '#ffffff',
      baseMaskBg: 'rgba(0, 0, 0, 0.45)',
      baseDisabledBg: '#f5f5f5',

      baseBorder: '#d9d9d9',

      baseText: 'rgba(0, 0, 0, 0.85)',
      basePrimaryText: 'rgba(0, 0, 0, 0.85)',
      baseSecondaryText: 'rgba(0, 0, 0, 0.45)',
      baseDisabledText: 'rgba(0, 0, 0, 0.25)',

      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)',

      /** dark */
      darkSelectors: ['.dark'],
      darkMediaQuery: '',

      darkPrimary: '#177ddc',
      darkSecondary: '#5a5a5a',
      darkSuccess: '#49aa19',
      darkWarning: '#d89614',
      darkError: '#d32029',
      darkDanger: '#d32029',
      darkInfo: '#177ddc',

      darkBg: '#141414',
      darkMaskBg: 'rgba(0, 0, 0, 0.45)',
      darkDisabledBg: 'rgba(255, 255, 255, 0.08)',

      darkBorder: '#434343',

      darkText: 'rgba(255, 255, 255, 0.85)',
      darkPrimaryText: 'rgba(255, 255, 255, 0.85)',
      darkSecondaryText: 'rgba(255, 255, 255, 0.45)',
      darkDisabledText: 'rgba(255, 255, 255, 0.3)',

      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)',
    }),
  ],
};

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.

// project entry main.ts

// custom preflight 1
import './styles/preflight1.css';

// third-party preflight
import 'modern-normalize';

// TailwindCSS base
import './styles/tailwind-base.css';

// custom preflight 2
import './styles/preflight2.css';

// antd styles
import 'antd/dist/antd.min.css';
// import 'antd/dist/antd.variable.min.css';

// ant-design-vue styles
import 'ant-design-vue/dist/antd.min.css';
// import 'ant-design-vue/dist/antd.variable.min.css';

// TailwindCSS components + utilities
// maybe override antd / ant-design-vue preflight if move TailwindCSS base here
import './styles/tailwind.css';

// any other global styles you need
import './styles/global.css';

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

/* styles/preflight2.css */
html,
page {
  font-size: var(--font-size, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* styles/tailwind.css */
@tailwind components;
@tailwind utilities;

elementPlusPreset

This preset provides element-plus colors compat config.

const { basePreset, elementPlusPreset} = require('tailwind-extensions');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [], // set your content
  presets: [
    basePreset,
    elementPlusPreset({
      // Adjust the value you need
      /** base */
      baseSelectors: [':root'],
      baseMediaQuery: '',

      basePrimary: '#409eff',
      baseSecondary: '#909399',
      baseSuccess: '#67c23a',
      baseWarning: '#e6a23c',
      baseError: '#f56c6c',
      baseDanger: '#f56c6c',
      baseInfo: '#909399',

      baseFill: '#f0f2f5',
      baseDarkerFill: '#e6e8eb',
      baseDarkFill: '#ebedf0',
      baseLightFill: '#f5f7fa',
      baseLighterFill: '#fafafa',
      baseExtraLightFill: '#fafcff',
      baseBlankFill: '#ffffff',

      baseText: '#303133',
      basePrimaryText: '#303133',
      baseRegularText: '#606266',
      baseSecondaryText: '#909399',
      basePlaceholderText: '#a8abb2',
      baseDisabledText: '#c0c4cc',

      baseBg: '#ffffff',
      basePageBg: '#f2f3f5',
      baseOverlayBg: '#ffffff',
      baseMaskBg: 'rgba(0, 0, 0, 0.5)',
      baseDisabledBg: '#f5f7fa',

      baseBorder: '#dcdfe6',
      baseDarkerBorder: '#cdd0d6',
      baseDarkBorder: '#d4d7de',
      baseLightBorder: '#e4e7ed',
      baseLighterBorder: '#ebeef5',
      baseExtraLightBorder: '#f2f6fc',

      baseBoxShadow: '0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)',

      /** dark */
      darkSelectors: ['.dark'],
      darkMediaQuery: '',

      darkPrimary: '#409eff',
      darkSecondary: '#909399',
      darkSuccess: '#67c23a',
      darkWarning: '#e6a23c',
      darkError: '#f56c6c',
      darkDanger: '#f56c6c',
      darkInfo: '#909399',

      darkFill: '#303030',
      darkDarkerFill: '#424243',
      darkDarkFill: '#39393a',
      darkLightFill: '#262727',
      darkLighterFill: '#1d1d1d',
      darkExtraLightFill: '#191919',
      darkBlankFill: 'transparent',

      darkText: '#e5eaf3',
      darkPrimaryText: '#e5eaf3',
      darkRegularText: '#cfd3dc',
      darkSecondaryText: '#a3a6ad',
      darkPlaceholderText: '#8d9095',
      darkDisabledText: '#6c6e72',

      darkBg: '#141414',
      darkPageBg: '#0a0a0a',
      darkOverlayBg: '#1d1e1f',
      darkMaskBg: 'rgba(0, 0, 0, 0.5)',
      darkDisabledBg: 'transparent',

      darkBorder: '#4c4d4f',
      darkDarkerBorder: '#636466',
      darkDarkBorder: '#58585b',
      darkLightBorder: '#414243',
      darkLighterBorder: '#363637',
      darkExtraLightBorder: '#2b2b2c',

      darkBoxShadow: '0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72)',
    }),
  ],
};

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.

// project entry main.ts

// custom preflight 1
import './styles/preflight1.css';

// third-party preflight
import 'modern-normalize';

// TailwindCSS base
import './styles/tailwind-base.css';

// custom preflight 2
import './styles/preflight2.css';

// element-plus styles
import 'element-plus/dist/index.css';

// TailwindCSS components + utilities
// maybe override element-plus preflight if move TailwindCSS base here
import './styles/tailwind.css';

// any other global styles you need
import './styles/global.css';

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

/* styles/preflight2.css */
html,
page {
  font-size: var(--font-size, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* styles/tailwind.css */
@tailwind components;
@tailwind utilities;

miniprogramBasePreset

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

const { basePreset, miniprogramBasePreset } = require('tailwind-extensions');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [], // set your content
  presets: [
    basePreset,
    miniprogramBasePreset,
  ],
};

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.

const { basePreset, easyPreset } = require('tailwind-extensions');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [], // set your content
  presets: [
    basePreset,
    easyPreset({
      selectors: ['.easy'],
      mediaQuery: '',
      fontSize: '24px',
    }),
  ],
};

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.

// project entry main.ts

// custom preflight 1
import './styles/preflight1.css';

// third-party preflight
import 'modern-normalize';

// TailwindCSS base
import './styles/tailwind-base.css';

// custom preflight 2
import './styles/preflight2.css';

// UI library styles
// import 'xx/yy.css';

// TailwindCSS base + components + utilities
// maybe override UI library preflight if move TailwindCSS base here
import './styles/tailwind.css';

// any other global styles you need
import './styles/global.css';

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

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

/* styles/tailwind.css */
@tailwind components;
@tailwind utilities;

Sponsors