TailwindCss基本介绍和使用

1. 安装

npm install -D tailwindcss


2. 创建配置文件tailwind.config.js

npx tailwindcss init

   指定作用目录，并增加对 [backcolor=url(&amp]vue 文件的识别


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


3. 在项目的公共 css 文件（src/style.css）中添加以下内容，用 @tailwind 指令添加 Tailwind 功能模块。

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

1. 运行 tailwindcss CLI 工具，指定源文件 ./src/style.css 和输出文件./src/output.css，开启监听生效目录中所有出现的 class 类名的变化，并编译为 CSS。

npx tailwindcss -i ./src/style.css -o ./src/output.css --watch

1. src/main.ts 中引入 tailwindcss 编译的输出文件./src/output.css

import { createApp } from "vue";
import "./style.css";
import "./output.css";
import App from "./App.vue";

createApp(App).mount("#app");





    6. 最后，设置同时启动 vite 项目和 tailwindcss 监听的命令

{
  "scripts": {
    "serve": "concurrently \"npm run dev\" \"npm run tail\"",
    "dev": "vite",
    "tail": "tailwindcss -i ./src/style.css -o ./src/output.css --watch",
  },
}


//貌似无必要

https://blog.csdn.net/qq_40147756/article/details/131870563?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522667b0aa73ed022034902c843172f7c11%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=667b0aa73ed022034902c843172f7c11&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-131870563-null-null.142^v102^pc_search_result_base7&utm_term=tailwindcss&spm=1018.2226.3001.4187