1.安装
npm install tailwindcss
2.在 assets 文件夹中创建 tailwind.css
添加内容
@tailwind base;
@tailwind components;
@tailwind utilities;
3.在 mian.js 中引入 tailwind.css
4.创建配置文件
npx tailwind init --full
5.创建 postcss.config.js 文件
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
6.测试
重启服务：npm run serve
<template>
<div class="home">
<h1 class="color1 hover:text-yellow-700">Hello World!</h1>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
// HelloWorld
}
}
</script>
<style>
.color1{
@apply bg-red-200;
@apply text-yellow-400;
}
.color2{
@apply bg-red-100;
@apply text-yellow-700;
}
</style>