发布者 1 年前
-在终端项目文件夹下使用npm或yarn安装
npm install tailwindcss --save-dev
# or
yarn add -D tailwindcss
在终端使用npx生成
npx tailwind init
成功后可以在项目根目录内看到tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}
在assets/css内创建tailwind.css文件,并引入
@tailwind base;
@tailwind components;
@tailwind utilities;
首先我们要在nuxt.config.js内引入path模块
const path = require('path');
然后配置postcss
// 引入我们刚刚创建的tailwind.css
css: [
'~assets/css/tailwind.css',
],
// 配置postcss
build: {
postcss: {
plugins: {
tailwindcss: path.resolve(__dirname, './tailwind.config.js')
}
}
}
<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange">
Test
</div>