当前位置：首页 » 《资源分享》 » 正文

tailwindcss 官网（一）安装、使用预处理器_ChrisP3616的博客

10 人参与  2021年10月09日 16:23  分类 : 《资源分享》  评论

点击全文阅读


tailwindcss 官网（一）安装、使用预处理器

文章目录

  • tailwindcss 官网（一）安装、使用预处理器
    • 1. 安装
      • 集成指南
      • 以 PostCSS 插件的形式安装 Tailwind CSS
        • 通过 npm 安装 Tailwind
        • 作为 PostCSS 插件来添加 Tailwind
        • 创建您的配置文件
        • 包含 Tailwind 到您的 CSS 中
        • 生成您的 CSS
      • 不依赖 PostCSS 使用 Tailwind
        • 使用自定义 CSS 文件
        • 自定义您的配置
        • 为生产而构建
      • 通过 CDN 来使用 Tailwind
      • HTML 启动模板
      • PostCSS 7 兼容性版本
    • 2. 使用预处理器
      • 使用PostCSS作为您的预处理器
        • 构建时导入
        • 嵌套
        • 变量
        • 未来的 CSS 功能
      • 使用 Sass、Less 或 Stylus
        • Sass
        • Less
        • Stylus

官网：安装 - Tailwind CSS 中文文档

1. 安装

学习如何在您的工程中使用 Tailwind CSS

集成指南

对于不同的框架/工具，安装 Tailwind CSS 是完全不同的过程，所以我们整理了一份常见安装的指南集合。

Next.js

Vue 3 (Vite)

Laravel

Nuxt.js

Create React App

Gatsby

没有在列表中看到您的工具？我们一直在扩充新的指南，同时您也可以按照 以 PostCSS 插件的形式安装 Tailwind CSS 的文档来安装。

以 PostCSS 插件的形式安装 Tailwind CSS

对于大多数现实中的工程，我们建议作为一个 PostCSS 插件来安装 Tailwind。大多数的现代框架基本都默认使用了 PostCSS，您很可能已经使用或当前正在使用其它 PostCSS 插件，例如 autoprefixer.

如果您从没有听说过 PostCSS，或者很想知道它与其它工具，如 Sass 的区别，请阅读我们的指南：将 PostCSS 用作预处理器。

如果您觉得这有些麻烦，并且想在不配置 PostCSS 的情况下尝试使用 Tailwind，请阅读有关在 不依赖 PostCSS 使用 Tailwind 的说明。

通过 npm 安装 Tailwind

对于大多数项目（并利用 Tailwind 的自定义功能），您需要通过 npm 安装 Tailwind 及其依赖项。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS 中，我们建议您安装 autoprefixer 去处理这个问题，就像上面的代码片段所展示的那样。

如果您将 Tailwind 与依赖于旧版本 PostCSS 的工具集成在一起，则可能会看到如下错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在这种情况下，您应该安装 PostCSS 7 兼容性版本。

作为 PostCSS 插件来添加 Tailwind

将 tailwindcss 和 autoprefixer 添加到您的 PostCSS 配置中。 多数情况下，这是项目根目录下的 postcss.config.js 文件，但也可能是 .postcssrc 文件或是由 package.json 文件中的 postcss 键所指定。

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

如果您不太清楚如何在您正在使用的工具如何配置 PostCSS，则需要参考一下这些工具的文档。搜索 ”configure postcss {我的工具名字}” 也将很快为您提供答案。

如果您使用的是其他 PostCSS 插件，则应阅读有关将 PostCSS 用作预处理器的文档，以获取有关与 Tailwind 集成在一起的最佳实践的详细信息。

创建您的配置文件

如果您想要自定义您的 Tailwind 安装，可以使用 Tailwind CLI 工具生成一份配置文件，这个命令行工具已包含在了 tailwindcss 这个 npm 包里了。

npx tailwindcss init

这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

在配置文档中了解有关配置 Tailwind 的更多信息。

包含 Tailwind 到您的 CSS 中

如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 将在构建时将这些指令替换为基于您配置的设计系统生成的所有样式。

如果您使用的是 postcss-import（或背后使用它的工具，例如 Webpacker for Rails），请使用我们的导入而不是 @tailwind 指令来避免在导入任何其他文件时出现问题：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

如果您使用的是像 React 或 Vue 这样的 JavaScript 框架，支持直接将 CSS 文件导入到 JS 中，那么您也可以完全跳过创建 CSS 文件，而直接导入 tailwindcss / tailwind.css，而后者已经安装了所有这些指令：

// app.js
import "tailwindcss/tailwind.css"

生成您的 CSS

实际构建项目的方式将取决于您使用的工具。 您的框架可能包含诸如 npm run dev 之类的命令，以启动在后台编译 CSS 的开发服务器，您可能自己在运行 webpack，或者您正在使用 postcss-cli 并运行诸如 postcss styles.css -o compiled.css 之类的命令。

如果您已经熟悉 PostCSS，则可能知道您需要做什么，如果不熟悉，请参考所用工具的文档。

为生产而构建时，请确保配置清除 (purge) 选项以删除任何未使用类，这样生成的文件尺寸最小：

  // tailwind.config.js
  module.exports = {
+   purge: [
+     './src/**/*.html',
+     './src/**/*.js',
+   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

阅读我们有关优化生产的单独指南，以了解有关 tree-shaking 优化未使用样式以获得最佳性能的更多信息。

如果您将 Tailwind 与依赖于较旧版本 PostCSS 的工具集成在一起，则在尝试构建 CSS 时可能会看到如下错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在这种情况下，您应该切换到我们的 PostCSS 7 兼容性版本。

不依赖 PostCSS 使用 Tailwind

对于简单的项目或只是体验一下 Tailwind，您可以使用 Tailwind CLI 工具生成 CSS，而无需配置 PostCSS 或甚至不需要安装 Tailwind 作为依赖项。

使用 npx 这个工具，它会与 npm 一起自动安装，以生成完全编译的 Tailwind CSS 文件：

npx tailwindcss-cli@latest build -o tailwind.css

这将创建一个基于 Tailwind 的默认配置生成的名为 tailwind.css 的文件，并使用 autoprefixer 自动添加任何必需的浏览器前缀。

现在，您可以像其他样式表一样将此文件引入到 HTML 中：

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

使用自定义 CSS 文件

如果您想基于 Tailwind 生成的默认样式自定义任何 CSS ，通常情况下只需创建一个 CSS 文件，并使用 @tailwind 指令包含 Tailwind 的 base，components 和 utilities 样式：

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities;

然后使用 npx tailwindcss build 构建 CSS 时，指定该文件的路径：

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

阅读有关添加基本样式，提取组件以及添加新的功能类的文档，以了解有关在 Tailwind 基础上添加自定义 CSS 的更多信息。

自定义您的配置

如果您想自定义 Tailwind 生成的内容，请使用 Tailwind CLI 工具创建一个 tailwind.config.js 文件：

npx tailwindcss-cli@latest init

这将会在您工程的根目录生成一个最小版本的 tailwind.config.js 文件。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

这个文件会在使用 npx tailwindcss build 命令生成您的 CSS 文件时被自动读取：

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

如果您想将配置文件保存在其他位置或使用其他名称，请在构建 CSS 时使用 -c 选项传递配置文件路径：

npx tailwindcss-cli@latest build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css

了解更多配置 Tailwind 文档。

为生产而构建

为生产而构建时，在生成 CSS 时在命令行上设置 NODE_ENV = production：

NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

这将确保 Tailwind 删除所有未使用的 CSS 并最小化 CSS 文件以获得最佳性能。 阅读我们有关优化生产的单独指南，以了解更多信息。

通过 CDN 来使用 Tailwind

在使用 CDN 之前，请注意，如果没有将 Tailwind 集成到您的构建过程中，那么许多使 Tailwind CSS 强大的功能将不可用。

  • 您无法自定义 Tailwind 默认主题
  • 您不能使用任何 指令， 如： @apply， @variants 等等
  • 您无法启用更多的变体，如： group-focus
  • 您无法下载第三方的插件
  • 您无法 tree-shake 未使用到的 Styles

想要充分利用 Tailwind，您应该作为 PostCSS 插件安装 Tailwind。

想要使用 Tailwind 进行快速演示，或者只是试一下框架，请通过 CDN 获取最新的默认配置：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

请注意因为 CDN 文件很大 (73.2kB compressed, 3020.7kB raw), 它并不代表您将 Tailwind 作为构建过程的一部分时生成的文件尺寸也是这么大.

遵循我们最佳实践的网站几乎总是压缩在10kb以下。

HTML 启动模板

为了使 Tailwind 的样式能够按预期工作，您将需要使用 HTML5 文档类型并包括响应式视口元标记以正确处理所有设备上的响应式样式。

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

许多前端框架（如 Next.js，vue-cli 等）会在后台自动为您完成所有这些操作，因此，根据您要构建的内容，可能不需要进行设置。

PostCSS 7 兼容性版本

从 v2.0 版本开始，Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 才使用了几个月，因此生态系统中的许多其他工具尚未更新，这意味着在安装 Tailwind，并尝试编译 CSS 时，您可能会在终端中看到这样的错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

为了弥合这个问题，直到每个人都进行了更新，我们还在 npm 的 compat 频道下发布了 PostCSS 7 兼容性版本。

如果遇到上述错误，请卸载 Tailwind 并使用兼容性版本重新安装：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

兼容性版本在任何方面都与主版本相同，因此您不会错过任何功能或类似功能。

一旦您的其余工具添加了对 PostCSS 8 的支持，就可以通过使用 latest 标签重新安装 Tailwind 及其相关依赖项来取代兼容性构建：

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

2. 使用预处理器

一个使用 Tailwind 与常见的 CSS 预处理器，如 Sass，Less 和 Stylus 的指南

由于 Tailwind 是一个 PostCSS 插件，没有什么可以阻止您使用 Sass，Less，Stylus 或其他预处理器，就像您可以使用其他 PostCSS 插件，如 Autoprefixer。

重要的是要注意，您不需要在Tailwind中使用预处理器–您通常在 Tailwind 项目中写很少的 CSS，所以使用预处理器并不像在一个您写了很多自定义 CSS 的项目中那样有利。

本指南只是作为一个参考，供那些需要或想将 Tailwind 与预处理器整合的人使用。

使用PostCSS作为您的预处理器

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

这有几个好处。

  • 您的构建速度会更快。因为您的 CSS 不需要被多个工具解析和处理，所以只使用 PostCSS，您的 CSS 会编译得更快。
  • 因为 Tailwind 添加了一些新的非标准关键字到 CSS 中（如@tailwind, @apply, theme()等），您经常不得不用烦人的，不直观的方式来写您的 CSS，以得到一个预处理器给您预期的输出。而使用 PostCSS 则可以避免这种情况。

关于可用的 PostCSS 插件，请参见PostCSS GitHub repository，但这里有几个重要的插件，我们在自己的项目中使用，并且可以推荐。

构建时导入

预处理器提供的最有用的功能之一是能够将您的 CSS 组织成多个文件，并在构建时通过提前处理 @import 语句而不是在浏览器中结合它们。

用于处理 PostCSS 的规范插件是 postcss-import。

要使用它，请通过 npm 安装该插件：

# npm
npm install postcss-import

# yarn
yarn add postcss-import

然后把它作为 PostCS 配置中的第一个插件：

// 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 使用单独的文件。

/* 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" 就足够了。

嵌套

要添加对嵌套声明的支持，您有两个选项：

  • postcss-nested，它使用的语法很像Sass。

  • postcss-nesting，它遵循 CSS Nesting 规范，希望将来能在浏览器中直接使用。

要使用这些插件，请通过 npm 安装它们：

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

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

然后将它们添加到您的 PostCSS 配置中，在 Tailwind 本身之后，但在 Autoprefixer 之前：

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

变量

如今 CSS 变量（官方称为自定义属性）有非常好的[浏览器支持](https://caniuse.com/#search=css custom properties)，所以实际上您可能根本不需要变量的插件。

但是如果您需要支持 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-reset-env，您不需要为这些功能添加单独的插件。

使用 Sass、Less 或 Stylus

要使用 Tailwind 的预处理工具，如 Sass，Less，或 Stylus，您需要添加一个额外的构建步骤到您的项目中，让您通过 PostCSS 运行您的预处理 CSS。如果您在项目中使用 Autoprefixer，您已经有了类似这样的设置。

确切的说明将取决于您使用的构建工具，所以请参阅我们的安装文档来了解更多关于将 Tailwind 整合到您现有的构建过程中。

关于使用 Tailwind 与预处理器的最重要的事情是，预处理器，如Sass，Less和Stylus单独运行，在Tailwind之前。这意味着您不能将 Tailwind 的theme()函数的输出输入到 Sass 颜色函数中，例如，因为 theme() 函数在您的 Sass 被编译成 CSS 并输入 PostCSS 之前不会被实际评估。

不行，Sass先被处理

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

为了获得最有凝聚力的开发体验，建议您专门使用 PostCSS 。

除此之外，每个预处理器在与 Tailwind 一起使用时，都有自己的一两个怪癖，下面用变通方法概述一下。

Sass

当使用Sass的 Tailwind 时，使用！重要与@apply需要您使用插值来正确编译。

无法工作，Sass 与 !important 冲突

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

{/

Use interpolation as a workaround

/}

使用插值作为变通

：

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

Less

当使用 Tailwind 和 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;
  }
}

{/

Use the @screen directive at the top-level

/}

在顶层使用 @screen 指令

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

Stylus

当使用 Tailwind 和 Stylus 时，您不能使用 Tailwind的 @apply 功能，如果不把整个 CSS 规则包裹在 @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，并以长格式写出实际的 CSS 属性。

使用 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');
  }
}

点击全文阅读


本文链接：http://m.zhangshiyu.com/post/29684.html

您的  预处理  文件  
<< 上一篇 下一篇 >>

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

  • 男女主人公叶宁杨琳小说被女神截胡后，我是高手这件事全城皆知全文免费阅读
  • 男女主人公叫林宇陈芸的小说免费资源
  • 小说《被丢入乱葬岗：她滔天归来！》全文阅读
  • 《商家真刑啊！这样产品也敢送来直播？》小说大结局免费试读 刻沐沐哥小说
  • 权谋天下：王爷你差点被休！小说阅读，权谋天下：王爷你差点被休！完整版
  • 完整版《武魂：开局一滴至尊龙血》全章节阅读
  • 叶叶倩富人小说《废柴的我觉醒神秘天魂》在线阅读
  • 已完结小说《家人们，新的风暴已经出现》全章节在线阅读
  • 江川赵玉梅是哪部小说的主角 江川赵玉梅全文阅读
  • 重生被夺身体前，拒当冤种嫁军官小说最新章节-主角苏在在苏秀秀全文免费阅读
  • 抖音爆款《快穿：女配逗比后，男主黑化了》林栀意沈之寒无广告阅读
  • 《未婚妻，你好甜》林安心白逸之最新章节在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1