关于css3:在Vue中使用tailwindcss

tailwindcss

一个很好的一个css插件，这里留神肯定要依照这个
版本！不然会提醒报错

第1步：创立Vue

vue create tailwind

第2步：进入根目录

cd tailwind

第3步：装置tailwind

cnpm i tailwindcss@1.4.6 -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;

第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>

功败垂成！