tailwind在vuecli使用

1.安装

npm install tailwindcss

2.在 assets 文件夹中创建 tailwind.css

添加内容

@tailwind base;
 
@tailwind components;
 
@tailwind utilities;

3.在 mian.js 中引入 tailwind.css

import "@/assets/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>