This preset will help you make element-plus and unocss work together. Based on unocss-preset-theme.
npm i -D unocss-preset-element-plusWe use uno.config.ts as an example below.
import { defineConfig, presetUno } from 'unocss';
import { presetElementPlus } from 'unocss-preset-element-plus';
export default defineConfig({
presets: [
presetUno(),
// place after other presets, since it overrides some values by default
presetElementPlus({ ... }),
],
});We recommend you to use tailwind compat reset if you are facing style conflicts.
You can a options object to the preset.
import { defineConfig, presetUno } from 'unocss';
import { presetElementPlus } from 'unocss-preset-element-plus';
export default defineConfig({
presets: [
presetUno(),
presetElementPlus({
// top-level options
prefix: '--un-preset-el',
preferCssVariables: true,
namespace: 'el',
// theme options
primary: '#409eff',
light: {
primary: '#409eff',
},
dark: {
primary: '#409eff',
},
}),
],
});Top-level Option
This option is extended from unocss-preset-theme. Defaults to --un-preset-el.
Top-level Option
This option is extended from unocss-preset-theme and use its default value.
You may need to update this field when you are developing with uni-app, taro, etc.
Top-level Option
Prefer existed css variables or not. Defaults to true.
If true, use element-plus css variables and you have to follow element-plus design standards.
If false, use generated variables and you can use more variables away from element-plus design standards.
You may need to set this field to false when you are developing with uni-app, taro, etc.
Top-level Option
The namespace used to find css variables. Used when preferCssVariables is true. Defaults to el.
Top-level Option
Breakpoints. Defaults to { xs: '0px', sm: '768px', md: '992px', lg: '1200px', xl: '1920px', '2xl': '2560px', xxl: '2560px' }.
Base primary color. Used when preferCssVariables is false. Defaults to #409eff.
Base success color. Used when preferCssVariables is false. Defaults to #67c23a.
Base warning color. Used when preferCssVariables is false. Defaults to #e6a23c.
Base error color. Used when preferCssVariables is false. Defaults to #f56c6c.
Base danger color. Used when preferCssVariables is false. Defaults to #f56c6c.
Base info color. Used when preferCssVariables is false. Defaults to #909399.
Used to generate theme light colors. Used when preferCssVariables is false.
By default white for light theme, #141414 for dark theme.
Used to generate theme dark colors. Used when preferCssVariables is false.
By default black for light theme, white for dark theme.
Primary text color. Used when preferCssVariables is false.
By default #303133 for light theme, #e5eaf3 for dark theme.
Regular text color. Used when preferCssVariables is false.
By default #606266 for light theme, #cfd3dc for dark theme.
Secondary text color. Used when preferCssVariables is false.
By default #909399 for light theme, #a3a6ad for dark theme.
Placeholder text color. Used when preferCssVariables is false.
By default #a8abb2 for light theme, #8d9095 for dark theme.
Disabled text color. Used when preferCssVariables is false.
By default #c0c4cc for light theme, #6c6e72 for dark theme.
Base border color. Used when preferCssVariables is false.
By default #dcdfe6 for light theme, #4c4d4f for dark theme.
Light border color. Used when preferCssVariables is false.
By default #e4e7ed for light theme, #414243 for dark theme.
Lighter border color. Used when preferCssVariables is false.
By default #ebeef5 for light theme, #363637 for dark theme.
Extra light border color. Used when preferCssVariables is false.
By default #f2f6fc for light theme, #2b2b2c for dark theme.
Dark border color. Used when preferCssVariables is false.
By default #d4d7de for light theme, #58585b for dark theme.
Darker border color. Used when preferCssVariables is false.
By default #cdd0d6 for light theme, #636466 for dark theme.
Base fill color. Used when preferCssVariables is false.
By default #f0f2f5 for light theme, #303030 for dark theme.
light fill color. Used when preferCssVariables is false.
By default #f5f7fa for light theme, #262727 for dark theme.
Lighter fill color. Used when preferCssVariables is false.
By default #fafafa for light theme, #1d1d1d for dark theme.
Extra light fill color. Used when preferCssVariables is false.
By default #fafcff for light theme, #191919 for dark theme.
Blank fill color. Used when preferCssVariables is false.
By default #ffffff for light theme, transparent for dark theme.
Dark fill color. Used when preferCssVariables is false.
By default #ebedf0 for light theme, #39393a for dark theme.
Darker fill color. Used when preferCssVariables is false.
By default #e6e8eb for light theme, #424243 for dark theme.
Page background color. Used when preferCssVariables is false.
By default #f2f3f5 for light theme, #0a0a0a for dark theme.
Base background color. Used when preferCssVariables is false.
By default #ffffff for light theme, #141414 for dark theme.
Overlay background color. Used when preferCssVariables is false.
By default #ffffff for light theme, #1d1e1f for dark theme.
Should override shadow or not. Defaults to false.
If false, only generate .shadow-base.
If true, also override .shadow-light, .shadow-lighter and .shadow-dark, override .shadow-xs with .shadow-lighter, override .shadow-sm with .shadow-light, override .shadow-md with .shadow-base, and override .shadow-lg with .shadow-dark.
You can pass an array specifying what you want to override, e.g. ['light', 'lighter', 'dark', 'xs', 'sm', 'md', 'lg'] for overriding all.
Base box shadow. Used when preferCssVariables is false.
By default 0px 12px 32px 4px rgba(0,0,0,.04), 0px 8px 20px rgba(0,0,0,.08) for light theme, 0px 12px 32px rgba(0,0,0,.36), 0px 8px 20px rgba(0,0,0,.72) for dark theme.
Light box shadow. Used when preferCssVariables is false.
By default 0px 0px 12px rgba(0,0,0,.12) for light theme, 0px 0px 12px rgba(0,0,0,.72) for dark theme.
Lighter box shadow. Used when preferCssVariables is false.
By default 0px 0px 6px rgba(0,0,0,.12) for light theme, 0px 0px 6px rgba(0,0,0,.72) for dark theme.
Dark box shadow. Used when preferCssVariables is false.
By default 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16) for light theme, 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000 for dark theme.
Should override font size or not. Defaults to false.
If false, only generate .text-extra-large, .text-large, .text-medium, .text-basis, .text-small and .text-extra-small.
If true, also override .text-xl with .text-extra-large, override .text-lg with .text-large, override .text-md with .text-medium, override .text-base with .text-basis, override .text-sm with .text-small, and override .text-xs with .text-extra-small.
You can pass an array specifying what you want to override, e.g. ['xl', 'lg', 'md', 'base', 'sm', 'xs'] for overriding all.
Extra large font size. Used when preferCssVariables is false. Defaults to 20px.
Large font size. Used when preferCssVariables is false. Defaults to 18px.
Medium font size. Used when preferCssVariables is false. Defaults to 16px.
Basis font size. Used when preferCssVariables is false. Defaults to 14px.
Small font size. Used when preferCssVariables is false. Defaults to 13px.
Extra small font size. Used when preferCssVariables is false. Defaults to 12px.