1.tailwind入门

套用主题

欢迎来到我的网站

Get started with Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

TailwindCSS的工作原理是扫描所有HTML文件、JavaScript组件和任何其他模板中的类名，生成相应的样式，然后将它们写入静态CSS文件。

It’s fast, flexible, and reliable — with zero-runtime.

它快速、灵活、可靠

Installation 安装

Install Tailwind CSS

Install tailwindcss via npm, and create your tailwind.config.js file.
```
npm install -D tailwindcss
npx tailwindcss init
```
Configure your template paths 配置模板路径

Add the paths to all of your template files in your tailwind.config.js file.

将这些路径添加到tailwind.config.js文件中的所有模板文件中。
tailwind.config.js
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
Add the Tailwind directives to your CSS 将Tailwind指令添加到CSS中

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

将每个Tailwind层的@tailwind指令添加到你的主CSS文件中。
src/input.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Start the Tailwind CLI build process 启动Tailwind CLI构建过程

Run the CLI tool to scan your template files for classes and build your CSS.

运行CLI工具扫描模板文件中的类并构建CSS。
Terminal window
```
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```

Start using Tailwind in your HTML

Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

将编译好的CSS文件添加到<head>中，并开始使用Tailwind的实用程序类来样式化您的内容。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

编辑器

推荐vscode