80 lines
1.2 KiB
Markdown
80 lines
1.2 KiB
Markdown
## 安装 Tailwind CSS 及其依赖
|
|
|
|
```bash
|
|
npm install -D tailwindcss postcss autoprefixer @nuxtjs/tailwindcss
|
|
```
|
|
|
|
## 初始化 Tailwind 配置文件
|
|
|
|
```bash
|
|
npx tailwindcss init
|
|
```
|
|
|
|
## 配置 `tailwind.config.js`
|
|
|
|
```js
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./components/**/*.{js,vue,ts}",
|
|
"./layouts/**/*.vue",
|
|
"./pages/**/*.vue",
|
|
"./plugins/**/*.{js,ts}",
|
|
"./app.vue",
|
|
"./error.vue",
|
|
],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [],
|
|
}
|
|
```
|
|
|
|
## 创建 Tailwind CSS 入口文件
|
|
|
|
在 assets/css/tailwind.css 文件中添加：
|
|
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
```
|
|
|
|
## 更新 `nuxt.config.ts/nuxt.config.js`
|
|
|
|
```js
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxtjs/tailwindcss']
|
|
})
|
|
```
|
|
|
|
## 添加自定义样式
|
|
|
|
在 tailwind.config.js 中扩展主题：
|
|
|
|
```js
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'primary': '#1DA1F2',
|
|
'secondary': '#14171A',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
## 使用 @apply 指令（在 CSS 文件中）
|
|
|
|
```css
|
|
.btn {
|
|
@apply font-bold py-2 px-4 rounded;
|
|
}
|
|
.btn-blue {
|
|
@apply bg-blue-500 text-white;
|
|
}
|
|
.btn-blue:hover {
|
|
@apply bg-blue-700;
|
|
}
|
|
``` |