TailWind CSS 安装使用

Tailwind 包含了一系列有用的开箱即用的基础样式，可以直接在标签上传入flex，border，display等直译的样式名

官方地址

1.通过 npm 安装 Tailwind

通过 npm 安装 Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.配置文件

npx tailwindcss init

生成tailwind.config.js， 并编辑里面的内容，以下是我的配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.添加 Tailwind 样式指令到 CSS文件中

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

将上面的放到css文件中，并在main.js引入

4.配置postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

OK~~
安装引入完毕，可以快乐的写样式了。
使用了TailWind CSS，你会觉得超香，写界面的速度提高了不少的