@modyqyw/tailwind-presets

@modyqyw/tailwind-presets

English | 简体中文

Opinionated TailwindCSS v3 presets.

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

Usage

npm install @modyqyw/tailwind-presets

Then update your TailwindCSS config.

base

This preset extends the default configuration of TailwindCSS. View Preset

const { base } = require('@modyqyw/tailwind-presets');

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

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

const { base, antDesign } = require('@modyqyw/tailwind-presets');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [...],
  presets: [
    base,
    antDesign({
      /** Base */
      baseSelectors = [':root', 'page'],
      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 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.

// 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;

element-plus

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

const { base, elementPlus } = require('@modyqyw/tailwind-presets');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [...],
  presets: [
    base,
    elementPlus({
      /** Base */
      baseSelectors = [':root', 'page'],
      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 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.

// 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;

miniprogram

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

const { base, miniprogramBase, miniprogramScreens, miniprogramSeparator } = require('@modyqyw/tailwind-presets');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [...],
  presets: [
    base,
    miniprogramBase,
    miniprogramScreens,
    miniprogramSeparator,
  ],
};

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.

// 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/preflight1.css */
button,
button::after {
  all: unset;
}

button {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

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

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

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

// postcss config file, e.g. .postcssrc.cjs
// replace selectors in @tailwind base
module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    'postcss-preset-env': {
      stage: 3,
      features: { 'nesting-rules': false },
    },
    'postcss-selector-replace': {
      before: ['html', 'body', 'img', 'span', /^a$/, '*'],
      after: [
        'html,page',
        'body,page',
        'img,image',
        'span,text',
        'a,functional-page-navigator,navigator',
        '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',
      ],
    },
  },
};

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

const { base, easy } = require('@modyqyw/tailwind-presets');

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

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.

// 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/preflight1.css */
button,
button::after {
  all: unset;
}

button {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* 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;