Using tailwindcss in Vue

tailwindcss

A good CSS plug-in. Please follow this rule
edition! Otherwise, an error will be prompted

---

Step 1: create Vue

vue create tailwind

---

Step 2: enter the root directory

cd tailwind

---

Step 3: install tailwind

cnpm i [email protected] -S

---

Step 4: install the configuration file

Will generate atailwind.config.js
npx tailwind init --full

---

Step 5: create postcss config. js

And step 4tailwind.config.jsSame level

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]
      : []
    ]
  }

---

Step 6: create CSS file

Create an arbitrary CSS in assets: such as tailwind css
Then paste the content

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

@import url("xxxxxxx")
//Convert font

.sb{
@apply w-10 h-10;
}
//Similar to CSS custom storage

---

Step 7: global import

Global import in mail
import "./assets/tailwind.css"

---

Step 8: start

cnpm run serve

---

Is the test successful

<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"
       
      />
    </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>

be accomplished!