安装

安装并配置 Tailwind CSS。

CDN

在开始之前请注意，Tailwind CSS 所拥有的很多强大特性在 CDN 上托管的版本中是不存在的，为了能够体验 Tailwind 的高级特性，请通过 npm 安装 Tailwind。

如果是为了快速做 demo 或只是试一试这个框架的话，可以直接引用 CDN 上的默认配置构建版本：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

或者，如果你希望引入除工具类之外的基本样式，可以引入如下链接：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css" rel="stylesheet">

<!-- 在这里书写你自己的 CSS 代码 -->

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css" rel="stylesheet">

NPM

对于大多数项目（并且是为了利用 Tailwind 的可定制特性），应该通过 npm 安装 Tailwind 。

1. 通过 npm 安装 Tailwind

Tailwind 已经被 npm 收录了，可以通过 npm 或 Yarn 安装。

# Using npm

npm install tailwindcss --save-dev

# Using Yarn

yarn add tailwindcss --dev

2. 创建 Tailwind 配置文件

Tailwind 基本上都是通过普通的 JavaScript 语法进行配置的。首先需要为你的项目创建一个 Tailwind 配置文件。我们建议在项目根目录下创建一个命名为 tailwind.js 的文件。

我们还提供了一个 CLI 工具，方便创建配置文件：

# Using npm

npx tailwind init [filename]

# Using Yarn

yarn tailwind init [filename]

如果您已经是一位经验丰富的 Tailwind 用户了，可能并不需要配置文件中的注释信息了，可以在生成配置文件时添加 --no-comments 参数将配置文件中的注释去掉。

3. 在你自己的 CSS 中使用 Tailwind

使用 @tailwind 指令将 Tailwind 的 preflight 和 utilities 样式引入到你自己的 CSS 代码中。

为了增加明显的特征并利于代码检查，我们强烈建议将主样式表文件的内容做如下结构安排：

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

4. 利用 Tailwind 处理 CSS 代码

使用 Tailwind 命令行工具（CLI）

对于简单的项目或者只是打算试一试 Tailwind ，你可以使用 Tailwind CLI 工具来处理 CSS 代码：

npx tailwind build styles.css [-c ./tailwind.js] [-o ./output.css] [--no-autoprefixer]

利用 npx tailwind help build 命令可以查看各个 CLI 参数的作用。

Tailwind 和 PostCSS 协同工作

对于大多数项目，你会希望将 Tailwind 作为 PostCSS 的一个插件添加到你的构建系统中。

我们对一些流行的工具提供了特定 Tailwind 的使用说明，如下所示，但是对于 PostCSS 工具自身的入门指南请参考 PostCSS 文档。

Webpack

在 postcss.config.js 文件中添加 tailwindcss 插件，并设置正确的 Tailwind 配置文件路径：

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    // ...
    tailwindcss('./path/to/your/tailwind.js'),
    require('autoprefixer'),
    // ...
  ]
}

请前往 webpack-starter 模板项目查看完整实例。

Gulp

将 tailwindcss 作为插件列表中的一员传递给 gulp-postcss ，并设置正确的 Tailwind 配置文件路径：

gulp.task('css', function () {
  var postcss = require('gulp-postcss');
  var tailwindcss = require('tailwindcss');

  return gulp.src('src/styles.css')
    // ...
    .pipe(postcss([
      // ...
      tailwindcss('./path/to/your/tailwind.js'),
      require('autoprefixer'),
      // ...
    ]))
    // ...
    .pipe(gulp.dest('build/'));
});

Laravel Mix

如果你的项目使用的是纯 CSS，可以使用 Laravel Mix 的 postCss 方法来处理你的 CSS 代码。设置 tailwindcss 插件并传递正确的 Tailwind 配置文件路径：

var tailwindcss = require('tailwindcss');

mix.postCss('resources/css/main.css', 'public/css', [
  tailwindcss('./path/to/your/tailwind.js'),
]);

如果正在使用某个预处理器（语言），可以通过 options 方法将 tailwindcss 作为一个 PostCSS 插件添加进来：

var tailwindcss = require('tailwindcss');

mix.less('resources/less/app.less', 'public/css')
  .options({
    postCss: [
      tailwindcss('./path/to/your/tailwind.js'),
    ]
  });

Sass 用户需注意： 由于一个未解决的 issue 和 Larvel Mix 的某个依赖有关系，如需将 Tailwind 和 Sass 一同使用，请关闭 processCssUrls 选项：

var tailwindcss = require('tailwindcss');

mix.sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./path/to/your/tailwind.js') ],
  });

有关此功能的作用和禁用此功能所产生的影响，请查看 Laravel Mix 文档.

Webpack Encore

创建 postcss.config.js 文件，添加 tailwindcss 插件并传递配置文件路径作为参数：

module.exports = {
  plugins: [
    require('tailwindcss')('./path/to/your/tailwind.js'),
  ]
}

在 webpack.config.js 配置文件中，创建 style 条目并开启 PostCSS 加载器。

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addStyleEntry('app', './css/app.css')
    .enablePostCssLoader()
;

module.exports = Encore.getWebpackConfig();

You can also pass options into the PostCSS loader by passing a callback, as per the Encore PostCSS docs:

.enablePostCssLoader(function(options) {
    options.config = {
        path: 'config/postcss.config.js'
    };
})

Note for Sass users: Due to an unresolved issue with one of Encore's dependencies, to use Sass with Tailwind you'll need to disable resolveUrlLoader:

Encore
    .enableSassLoader(function (options) {}, {
        resolveUrlLoader: false
    })
    ;

Brunch

Add tailwindcss to the list of processors you pass to postcss-brunch, passing the path to your config file:

exports.config = {
  // ..
  plugins: {
    // ...
    postcss: {
      processors: [
        require('tailwindcss')('./tailwind.js')
      ]
    }
    // ...
  }
};