f8173fd706
refactor(blog): restructure blog post layouts and metadata docs: add markdown migration guide and project rules update style(global.css): update typography theme variables chore: move temp_docs to appropriate blog post locations
2.3 KiB
2.3 KiB
authors, title, tags
| authors | title | tags | |||
|---|---|---|---|---|---|
|
Docusaurus v3中使用Tailwind Css的样式 |
|
今天来分享一下如何在Docusaurus v3中使用Tailwind Css的样式。
安装相关依赖
npm install tailwindcss
配置tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx,md,mdx}",
"./docs/**/*.{md,mdx}",
],
theme: {
screens: {
xs: '480px',
sm: '576px',
md: '768px',
lg: '998px',
xl: '1200px',
'2xl': '1400px',
},
extend: {
fontFamily: {
sans: 'var(--ifm-font-family-base)',
firacode: 'var(--font-family-firacode)',
kaiti: 'var(--font-family-kaiti)',
},
colors: {
'font-color': 'var(--ifm-font-color-base)',
'link-color': 'var(--ifm-link-color)',
'link-hover-color': 'var(--ifm-link-hover-color)',
primary: 'var(--ifm-color-primary)',
'primary-light': 'var(--ifm-color-primary-light)',
'primary-lighter': 'var(--ifm-color-primary-lighter)',
'primary-lightest': 'var(--ifm-color-primary-lightest)',
'primary-dark': 'var(--ifm-color-primary-dark)',
'primary-darker': 'var(--ifm-color-primary-darker)',
'primary-darkest': 'var(--ifm-color-primary-darkest)',
},
boxShadow: {
nysm: '0 0 2px 0 rgb(0 0 0 / 0.05)',
ny: '0 0 3px 0 rgb(0 0 0 / 0.1), 0 0 2px - 1px rgb(0 0 0 / 0.1)',
nymd: '0 0 6px -1px rgb(0 0 0 / 0.1), 0 0 4px -2px rgb(0 0 0 / 0.1)',
nylg: '0 0 15px -3px rgb(0 0 0 / 0.1), 0 0 6px -4px rgb(0 0 0 / 0.1)',
spread: '0 5px 40px rgb(0 0 0 / 0.1)',
},
},
},
plugins: [],
darkMode: ["class", '[data-theme="dark"]'],
corePlugins: {
preflight: false,
},
blocklist: ["container"],
}
创建tailwind.css
在src/css目录下创建tailwind.css文件，并写入以下内容：
@tailwind base;
@tailwind components;
@tailwind utilities;
注意：创建完成后是需要在custom.css中导入tailwind.css的，否则tailwind样式不会生效
创建postcss.config.js
在项目根目录下创建postcss.config.js文件，并写入以下内容：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}