Using tailwindcss in Vue



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: [
    // Include any special characters you're using in this regular expression
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
module.exports = {
    plugins: [
      ...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

@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

Using tailwindcss in Vue

  <div class="mx-auto flex p-6 bg-white rounded-lg shadow-outline mt-10 max-w-xs">
    <div class="flex-shrink-0">
    <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>

be accomplished!
Using tailwindcss in Vue