自定义 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 上关注我

里多伊·哈桑

访问我的网站