安装 Tailwind CSS
npm install tailwindcss
创建 TailwindCSS 配置文件
npx tailwindcss init
这一步骤会自动在根目录下创建tailwind.config.js
。
内容修改为
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
content: [],
theme: {
extend: {},
},
plugins: [],
}
安装 PostCSS 和 autoprefixer
由于 Tailwind 不会自动添加浏览器引擎专属前缀到生成的 CSS 中,建议安装 autoprefixer 去处理这个问题。
npm install -D postcss autoprefixer
创建 PostCSS 配置文件
我们在项目根目录下手动创建postcss.config.js
。
内容如下
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
引入 TailwindCSS
手动创建tailwind.css
,存放到哪里都可以,我的是Vuetify项目,所以我粗放到src/styles
下。
内容如下:
@tailwind base;
@tailwind components;
@tailwind utilities;
然后在 src/main.js 文件中引入。
/**
* main.js
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/
// Components
import App from './App.vue'
import '@/styles/tailwind.scss'
// Composables
import { createApp } from 'vue'
// Plugins
import { registerPlugins } from '@/plugins'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')
精选留言