# 函数和指令

参考文档地址 (opens new window)

# 1. tailwind.config.js

下面是一个完整的配置文件

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin');

module.exports = {
    darkMode: 'class', //开启深色模式 ,需要配合spaghetti.js 才行
    content: ['./packages/**/*.{html,js,vue,jsx}', './vuepress/**/*.{md,js,vue,jsx,html}'], //只有在 packages文件夹下的 使用的 tailwindcss 类库,才会被编译到 css里面
    theme: {
        fontFamily: {
            display: ['Inter', 'system-ui', 'sans-serif'],
            body: ['Inter', 'system-ui', 'sans-serif']
        },
        colors: {
            //colors 每个颜色都是一个对象,不能用单个字符串赋值,会报错的
            transparent: 'transparent',
            gray: colors.gray,
            red: colors.red,
            orange: colors.orange,
            yellow: colors.amber,
            lime: colors.lime,
            green: colors.emerald,
            // green: { //这个是正确的 修改颜色的写法
            //   50: '#fff7ed',
            //   100: '#ffedd5',
            //   200: '#fed7aa',
            //   300: '#fdba74',
            //   400: '#fb923c',
            //   500: '#f97316',
            //   600: '#ea580c',
            //   700: '#c2410c',
            //   800: '#9a3412',
            //   900: '#7c2d12'
            // },
            cyan: colors.cyan,
            blue: colors.blue,
            indigo: colors.indigo,
            purple: colors.purple,
            pink: colors.pink,
            black: colors.black,
            white: colors.white
        }
    },
    corePlugins: {
        // preflight: false
    },
    variants: {},
    plugins: []
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 2. spaghetti.js

如果要深色主题,需要在首页添加下面 js 文件

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
    localStorage.theme === 'dark' ||
    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
    document.documentElement.classList.add('dark');
} else {
    document.documentElement.classList.remove('dark');
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light';

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark';

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3.单独使用

# 安装

通过 npm 安装 tailwindcss，并创建您的 tailwind.config.js 文件。

npm install -D tailwindcss
npx tailwindcss init

1
2
3

# 配置模板路径

将路径添加到 tailwind.config.js 文件中的所有模板文件。 npx tailwindcss -i packages/theme/src/tailwind-main.css -o ./vuepress/.vuepress/public/css/css.css --watch

← 函数和指令单独使用 →