自定义 Tailwind CSS – 扩展框架

在本文中，我们将深入研究自定义 tailwind css 以满足您项目的需求。 tailwind 非常灵活，可以扩展到默认配置之外，允许您创建完全定制的设计系统。

1.为什么要定制 tailwind？

默认情况下，tailwind 提供了广泛的实用程序类，但有时您会想要超出可用的范围。您可以添加自己的颜色、字体、间距值，甚至断点，使 tailwind 非常适合您的设计系统。

示例：

您可能想在项目中使用品牌特定的颜色或自定义字体。 tailwind 可让您在其配置文件 (tailwind.config.js) 中轻松配置这些设置。

2.设置 tailwind 配置文件

通过 npm 安装 tailwind 后，您可以通过运行以下命令创建配置文件：

立即学习“前端免费学习笔记（深入）”；

  npx tailwindcss init   

这将生成一个 tailwind.config.js 文件，您可以在其中自定义 tailwind 的默认设置。

示例：

  module.exports = {   theme: {     extend: {       colors: {         brand: '#5a67d8',       },       fontfamily: {         custom: ['open sans', 'sans-serif'],       },     },   }, }   

在此示例中：

• 我们添加了自定义颜色（品牌）和自定义字体系列（自定义）。

3.添加自定义颜色和间距

tailwind 允许您定义自定义颜色和间距值，以满足您项目的设计需求。您可以扩展默认调色板或完全替换它。

示例 – 自定义颜色：

  module.exports = {   theme: {     extend: {       colors: {         primary: '#1e40af',         secondary: '#a78bfa',       },     },   }, }   

现在您可以在 html 中使用这些颜色：

  <div class="bg-primary text-white">custom background</div>   

示例 – 自定义间距：

  module.exports = {   theme: {     extend: {       spacing: {         '72': '18rem',         '84': '21rem',         '96': '24rem',       },     },   }, }   

这些新的间距值现在可以像这样使用：

  <div class="mt-72">extra margin</div>   

4.自定义断点

如果默认的响应式断点不符合您的设计要求，您可以修改或添加新的断点。

示例：

  module.exports = {   theme: {     screens: {       'sm': '640px',       'md': '768px',       'lg': '1024px',       'xl': '1280px',       '2xl': '1536px',       '3xl': '1920px', // adding a custom breakpoint     },   }, }   

现在您可以在新的 3xl 断点处应用样式。

5.清除未使用的 css

tailwind 可以生成大量 css，但您可以通过清除未使用的样式来显着减小生产 css 的大小。 tailwind 有一个内置的清除选项，可以从最终的 css 文件中删除未使用的类。

设置清除：

  module.exports = {   purge: ['./src/**/*.html', './src/**/*.js'], }   

这可确保只有 html 和 javascript 文件中使用的 css 类包含在生产版本中，从而使您的最终 css 文件小得多。

结论

自定义 tailwind css 允许您根据项目的具体需求定制框架。无论是添加自定义颜色、字体、间距，甚至断点，tailwind 都能让您灵活地创建独特的设计系统，同时仍然利用实用程序优先类的强大功能。

在 linkedin 上关注我

里多伊·哈桑

访问我的网站