tailwindcss百分百安装成功,最清楚的教程来了

tailwindcss 安装
 
一定要装,否则,失败
 
//npm install tailwindcss
 
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
 
新建 tailwind.css,在 src/assets 新建 css 文件夹，并新建 tailwind.css
 
之后再 tailwind.css 文件中，添加如下内容:
 
@tailwind base;
@tailwind components;
@tailwind utilities;
 
修改 main.js 引入 import "./assets/css/tailwind.css"
 
 
创建 Tailwind 配置文件
npx tailwind init
 
 
 
根目录下新建
新建 postcss.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]
      : []
    ]
  }
重启
测试
我们直接修改 App.vue 文件，来看看效果
<template>
  <div class="flex bg-white lg:h-3/4">
    <div class="max-w-md m-auto px-10 py-3 sm:px-0 lg:w-full lg:px-10 lg:py-16">
      <div class="flex justify-start items-end">
        <div class="iconfont vacation-bf text-4xl text-indigo-500 font-bold"></div>
        <div class="flex text-2xl ml-3 pt-3 font-semibold">Work<div>cation</div></div>
      </div>
      <img src="./assets/img/img2.jpg" alt="" class="mt-5 rounded-lg shadow-lg lg:hidden">
      <h1 class="mt-5 font-bold text-xl leading-tight text-left sm:text-2xl">
        You can word from anywhere.
        <br>
        <span>Take advantage of it.</span>
      </h1>
      <p class="mt-3 text-gray-500 text-left sm:text-lg">Workcation helps you find work-friendly rentals in beautiful location so you can enjoy some nice weather even when you're not on vation.</p>
      <div class="mt-3 flex justify-items-start">
        <a href="#" class="inline-block bg-indigo-500 text-gray-50 px-3 py-2 shadow-md rounded-md">Book your escape</a>
      </div>
    </div>
    <div class="w-1/2 hidden lg:block lg:relative">
      <img src="./assets/img/img2.jpg" alt="" class="absolute inset-0 w-full h-full object-cover object-center">
    </div>
    <div style=""></div>
  </div>
</template>
能看到图片和文字的效果出来就是OK