@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.
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
toclass
. - 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
toclass
. - 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;