TailwindCSS 教程：如何在框架中使用它-JavaScript中文网-JavaScript教程资源分享门户

什么是 TailwindCSS

TailwindCSS 是一个基于原子类的 CSS 框架，它为开发者提供了丰富的 CSS 工具集，这些工具类涵盖了常用的样式命令，如边距、宽度、高度、背景、字体等等。采用 TailwindCSS 可以减少手写 CSS 的工作量，并且可以快速设计和实现页面。

TailwindCSS 的优点

提高效率：我们不用再写重复的 CSS 样式代码，直接在 HTML 标签中使用 TailwindCSS 的类名即可完成样式
可维护性高：在某些情况下，我们需要增加或修改 CSS 样式。由于 TailwindCSS 的类名基于一个特定的命名规则，所以我们可以很轻松的找到并修改样式，而不会影响到其它样式
减少代码量：由于 TailwindCSS 为我们提供了许多快捷的 CSS 工具，因此我们不用再写冗长的 CSS 代码
定制性：TailwindCSS 支持自定义颜色、字体、边框样式等样式的生成，因此灵活性很高

如何使用 TailwindCSS

安装 TailwindCSS

要使用 TailwindCSS，首先要在我们的项目中安装 TailwindCSS。有两种方式可以安装：

使用 npm 安装：

npm install tailwindcss

使用 CDN 链接：

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

配置 TailwindCSS

当然，我们也需要在项目中配置 TailwindCSS，使得它可以根据我们的需要生成相关样式。在我们的项目中增加一个 tailwind.config.js 文件，并修改 module.exports如下：

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [],
}

在这个配置文件中，我们可以自定义一些选项，比如颜色、边框样式、字体等等。详见 TailwindCSS 配置文档。

在框架中使用 TailwindCSS

对于常见的前端框架，如 React、Vue.js、Angular 等，可以通过引入 TailwindCSS 样式文件来快速使用该框架。

在 React 和 Vue.js 中，我们可以使用 create-react-app 或者 vue-cli 来创建项目。这些工具已经为我们集成好了 TailwindCSS，因此不必再手动配置。

在 Angular 中，我们需要手动添加配置。首先，安装 TailwindCSS：

npm install tailwindcss

然后，在 .angular.json 文件的 styles 数组中添加其路径：

"styles": [
  "src/styles.css",
  "node_modules/tailwindcss/dist/tailwind.min.css"
]

接下来，我们就可以在 HTML 标签中使用 TailwindCSS 的类名了：

<div class="flex justify-center items-center bg-gray-500 h-screen w-screen">
  <h1 class="text-white font-bold text-4xl">Hello, TailwindCSS!</h1>
</div>

上述代码会生成一个带有背景色和文字的居中布局。

线上 TailwindCSS 文档和示例

请访问 TailwindCSS 的官方文档或者 Tailwind Play，在这里可以找到更多关于 TailwindCSS 的文档和示例。

结论

TailwindCSS 是一个功能强大且易于使用的 CSS 框架，它将繁琐的 CSS 编码转化为简单的 HTML 标签类名，并且具有高度的自定义性和可维护性。在学习了本教程之后，相信您已经可以轻松地在框架中使用 TailwindCSS 了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66fd06e74471362601765bbf