Tailwind CSS on GitHub

使用预处理器

在Tailwind使用使用常用的预处理器,比如:Sass, Less, 以及 Stylus.

由于Tailwind是一个PostCSS插件,没有什么可以阻止你把它与Sass, Less, Stylus,或其他预处理器一起使用,就像你可以与其他PostCSS插件一起使用一样,如Autoprefixer

需要格外注意的是,你不需要在Tailwind项目中使用预处理器 - 你通常在Tailwind项目中编写很少的CSS,所以使用预处理器并不像在你编写大量定制CSS的项目中那样有帮助。

本指南仅供出于某种原因需要或想要将Tailwind与预处理器集成的人参考。


使用PostCSS作为预处理器

如果你正在为一个全新的项目使用Tailwind,不需要将它与任何现有的Sass/Less/Stylus样式表集成,你应该高度考虑依赖其他PostCSS插件来添加你使用的预处理器功能,而不是使用单独的预处理器。

这有几个好处:

  • 你的构建将更快。因为你的CSS不需要被多种工具解析和处理,你的CSS只使用PostCSS会编译得更快。
  • 没有奇怪的写法。因为Tailwind添加了一些新的非标准的关键字到CSS(如@tailwind@applytheme()等),你经常不得不写一些不直观的CSS,以获得你想要的预处理器的输出。只使用PostCSS可以避免这种情况。

要获得一个全面的可用的PostCSS插件列表,请参阅PostCSS GitHub知识库,但这里有一些我们在自己的项目中使用的重要插件,可以推荐给大家。

编译时引入

预处理器提供的最有用的特性之一是能够将CSS组织成多个文件,并在编译时(而不是在浏览器中)通过预先处理@import语句将它们组合在一起。

使用PostCSS处理这个问题,一般会选择PostCSS -import

要使用它,请通过npm安装插件:

# npm
npm install postcss-import

# yarn
yarn add postcss-import

然后将它作为第一个插件加入到你的PostCSS配置中:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

关于postcss-import需要注意的一件重要事情是,它严格遵守CSS规范,除了文件的最顶部,不允许在任何其他地方使用@import语句。

无效, `@import`语句必须放在最上面

/* components.css */

.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

/* Will not work */
@import "./components/card";

这个问题的最简单的解决方案是永远不要在同一个文件中写常规CSS和导入其他CSS文件。相反,为你的导入创建一个主要入口点文件,并将所有实际的CSS保存在单独的文件中。

使用单独的文件来放置导入文件以及编写的CSS

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";
/* components/buttons.css */
.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}
/* components/card.css */
.card {
  @apply p-4 bg-white shadow rounded;
}

你最有可能遇到这种情况的地方是在主CSS文件中,其中包括你的@tailwind声明。

无效, `@import`语句必须放在最上面

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

你可以通过把你的@tailwind声明放到各自的文件中来解决这个问题。为了方便起见,我们在框架中为每个@tailwind声明提供了单独的文件,你可以直接从node_modules导入这些文件。

导入我们提供的CSS文件

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

postcss-import很智能,它会自动在node_modules文件夹中查找文件,所以你不需要提供王铮的路径,"tailwindcss/base"这样就足够了。

嵌套

要添加对嵌套声明的支持,有两个选项:

要使用这两个插件,请通过npm安装它们:

# npm
npm install postcss-nested  # or postcss-nesting

# yarn
yarn add postcss-nested  # or postcss-nesting

Then add them to your PostCSS configuration, somewhere after Tailwind itself but before Autoprefixer:

然后把它们添加到你的PostCSS配置中,必须是在Tailwind和Autoprefixer之间的某个地方:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'), // or require('postcss-nesting')
    require('autoprefixer'),
  ]
}

变量

现在CSS变量(官方称为自定义属性)有很好的浏览器支持,所以你可能根本不需要变量插件。

然而,如果你需要支持IE11,你可以使用postcss-custom-properties插件。

要使用它,请通过npm安装它:

# npm
npm install postcss-custom-properties

# yarn
yarn add postcss-custom-properties

然后把它们添加到你的PostCSS配置中,必须是在Tailwind和Autoprefixer之间的某个地方:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('postcss-custom-properties'),
    require('autoprefixer'),
  ]
}

未来的CSS特性

你可以使用postcss-preset-env插件为你的项目添加数十个即将到来的CSS特性。

要使用它,请通过npm安装它:

# npm
npm install postcss-preset-env

# yarn
yarn add postcss-preset-env

然后把它们添加到你的PostCSS配置中,必须是在Tailwind之后的某个地方:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-preset-env')({ stage: 1 }),
  ]
}

需要注意的是,CSS变量、嵌套和自动修复都是开箱即用的,所以如果你使用postcss-preset-env,你不需要为这些特性添加单独的插件。


使用Sass, Less,或者Stylus

要使用Tailwind和预处理工具(如Sass、Less或Stylus)一起使用,你需要向项目添加额外的构建步骤,让你通过PostCSS运行预处理后的CSS。如果你在项目中使用Autoprefixer,那么你已经设置了类似的东西。

具体的说明会根据你使用的构建工具而有所不同,所以请参阅我们的安装文档来了解更多关于将Tailwind集成到你现有的构建过程的信息。

要理解的最重要的一点是,在使用Tailwind和预处理器时,像Sass、Less和Stylus这样的预处理器是分开运行的。这意味着你不能将Tailwind的theme()函数的输出输入到Sass颜色函数中,因为在Sass被编译成CSS并输入到PostCSS中之前,theme()函数不会实际计算。

无效, Sass会被首先处理

.alert {
  background-color: darken(theme('colors.red.500'), 10%);
}

为了更好结合具体开发过程,建议你专门使用PostCSS

除此之外,在使用Tailwind时,每个预处理器都有自己的一两个特点,下面将介绍一些解决方案。

Sass

使用Sass,当在@apply后使用!important需要使用正确的指令来确保正常工作。

无效, Sass不能解析!important

.alert {
  @apply bg-red-500 !important;
}

使用插值

.alert {
  @apply bg-red-500 #{!important};
}

Less

使用Less,你不能嵌套Tailwind的@screen指令。

无效, Less不能识别嵌套媒体查询

.card {
  @apply rounded-none;

  @screen sm {
    @apply rounded-lg;
  }
}

相反,使用一个常规的媒体查询配合theme()函数来定义你的屏幕大小,或者简单地不要嵌套你的@screen指令。

使用常规媒体查询以及theme()

.card {
  @apply rounded-none;

  @media (min-width: theme('screens.sm')) {
    @apply rounded-lg;
  }
}

直接在最上层使用@screen指令

.card {
  @apply rounded-none;
}
@screen sm {
  .card {
    @apply rounded-lg;
  }
}

Stylus

使用Stylus, 你必须把Tailwind的@apply特性全部放到@css里面,这样Stylus就会将其视为字面量CSS:

无效, Stylus不能解析@apply

.card {
  @apply rounded-lg bg-white p-4
}

使用@css避免当成Stylus来解析

@css {
  .card {
    @apply rounded-lg bg-white p-4
  }
}

这伴随着一个重要的问题,那就是@css块里面你不能使用Stylus特性

另一个解决办法就是使用theme()方法而不是@apply

使用theme()替代@apply

.card {
  border-radius: theme('borderRadius.lg');
  background-color: theme('colors.white');
  padding: theme('spacing.4');
}

除此之外,Stylus不支持嵌套@screen指令(就像Less一样)。

无效, Stylus不能识别嵌套媒体查询

.card {
  border-radius: 0;

  @screen sm {
    border-radius: theme('borderRadius.lg');
  }
}

相反,使用一个常规的媒体查询配合theme()函数来定义你的屏幕大小,或者简单地不要嵌套你的@screen指令。

使用常规媒体查询以及theme()

.card {
  border-radius: 0;

  @media (min-width: theme('screens.sm')) {
    border-radius: theme('borderRadius.lg');
  }
}

直接在最上层使用@screen指令

.card {
  border-radius: 0;
}
@screen sm {
  .card {
    border-radius: theme('borderRadius.lg');
  }
}