Tailwindcss 配置使用指南

介绍

Tailwind CSS 是一个利用公用程序类（Utilize Class，下文皆称Utilize Class）的 CSS 框架。但被我们称之为”原子类”, 其工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。

使用 Tailwind CSS，你可以使用Utilize Class轻松设置响应式设计，因此您无需设置媒体查询。它快速、灵活、可靠，没有运行时负担。

快速上手

依赖环境

Tialwindcss 支持多种环境安装实现。

安装

使用tailwind cli

从零开始使用Tailwind CSS最简单、最快的方法是使用Tailwind CLI工具。如果您想在不安装Node.js的情况下使用CLI，CLI也可以作为独立的可执行文件使用（使用cli可执行文件不支持windows系统安装，这里不做介绍，默认需要安装nodejs环境，配置使用参考在没有nodejs情况下如何使用Tailwind CSS）。

1. 安装 Tailwind CSS

$ npm install -D tailwindcss
$ npx tailwindcss init

2. 配置适用文件地址

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 全局加载 Tailwind指令

在我们的入口文件中导入一个全局css文件global.css , 如下：

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

4. 开启Tailwind cli构建

运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

$ npx tailwindcss -i ./src/global.css -o ./dist/output.css --watch

5. 在html中使用tailwind

在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类来为你的内容设置样式了。

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>

<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

使用PostCss

将Tailwind CSS安装为PostCSS插件是将其与webpack、Rollup、Vite和Parcel等构建工具集成的最无缝的方式。

1. 安装 tailwindcss 并创建 tailwind.config.js

$npm install -D tailwindcss postcss autoprefixer # 安装tailwindcss、postcss
$ npx tailwindcss init # 创建tailwind.config.js文件

2. 将tailwindcss添加到postcss配置中

//  postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. 配置适用文件

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

4. 添加tailwind指令到入口的css文件中

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

使用CDN

使用CDN在浏览器中直接尝试Tailwind，无需任何构建步骤。CDN仅用于开发目的，不是生产的最佳选择。

1. 添加CDN脚本到目标html文件中

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>   <!--tailwindcss 脚本地址-->
</head>

<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

2. 定制客制化配置

编辑tailwind.config对象以使用自己的自定义配置。

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
  // 自定义配置
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline **text-clifford**">
    Hello world!
  </h1>
</body>
</html>

3. 添加自定义tailwindcss样式

在html中通过适用 type="text/tailwindcss" 添加自定义的tailwind css样式

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
</head>
<body>
  <div class="lg:content-auto">
    <!-- ... -->
  </div>
</body>
</html>

4. 使用插件

通过在cdn地址中添加plugins参数开启插件使用，如 forms和typography

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>