在本文中，我们将深入研究自定义 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 中使用这些颜色：
RPCMS是一款基于PHP+MYSQL的轻量型内容管理/博客系统，支持PHP5.6版本以上，支持win/Linux系统。它自主研发的RP框架（OPP方式），采用MVC架构搭建的高效、稳定的内容管理系统。灵活小巧，但有着强大的扩展性、丰富的插件接口和大量的模板。统一采用模板标签，轻松上手，让开发更方便！智能缓存机制让网站运行方面大幅度提高。系统特点：源码简洁、体积轻巧、功能丰富、安全、灵活等特点，完
custom background
示例 – 自定义间距：
module.exports = {
theme: {
extend: {
spacing: {
'72': '18rem',
'84': '21rem',
'96': '24rem',
},
},
},
}
这些新的间距值现在可以像这样使用：
extra margin
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 上关注我
里多伊·哈桑
