在Vue中使用tailwindcss

tailwindcss

一个很好的一个css插件，这里注意一定要按照这个
版本！不然会提示报错

第1步：创建Vue

vue create tailwind

第2步：进入根目录

cd tailwind

第3步：安装tailwind

cnpm i [email protected] -S

第4步：安装配置文件

会生成一个tailwind.config.js
npx tailwind init --full

第5步：创建postcss.config.js

和第四步的tailwind.config.js同级

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
    ],

    // Include any special characters you're using in this regular expression
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
  })

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
      ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
    ]
  }

第6步：创建CSS文件

在assets里面创建一个任意css：比如tailwind.css
然后粘贴内容

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

@import url("xxxxxxx")
//转换字体

.sb{
@apply w-10 h-10;
}
//类似于css自定义存储

第7步：全局引入

在mail中全局引入
import "./assets/tailwind.css"

第8步：开始启动

cnpm run serve

测试是否成功

<template>
  <div class="mx-auto flex p-6 bg-white rounded-lg shadow-outline mt-10 max-w-xs">
    <div class="flex-shrink-0">
      <img
        class="h-20"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-20%2F5a62efe528ab5.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617351016&t=31e3a2f786edbb8d0d1c73d14fc5c68e"
      />
    </div>
    <div class="ml-6 pt-1">
      <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
      <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
    </div>
  </div>
</template>

大功告成！

zhaobuhui