tailwindcss

快速入门

• 安装相关依赖

pnpm add tailwindcss postcss autoprefixer -D

• 执行命令，然后生成 <font style="color:rgb(0, 0, 0);">tailwind.config.ts</font> 和 <font style="color:rgb(0, 0, 0);">postcss.config.js</font> 文件

npx tailwindcss init --ts -p

• 在 **<font style="color:rgb(0, 0, 0);">tailwind.config.ts</font>** 文件中添加所有模板文件的路径。

import type { Config } from 'tailwindcss'
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

• 默认是LF(Linux和macOS)，选择CRLF(Windows)
• 
• 将 Tailwind 指令添加到您的 CSS 中

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

• 引用 CSS 文件

import "./styles/tailwind.scss";

• 启动/重启服务器
• 开始使用

export default function Index() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

• 推荐vscode插件：https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
• 格式化

pnpm add prettier-plugin-tailwindcss -D

• .prettierrc.cjs

// ...
  plugins: ["prettier-plugin-tailwindcss"],
// ...

参考链接

• 快速掌握 Tailwind：最流行的原子化 CSS 框架