Tailwind CSS 是一个快速为网站添加样式的工具库，它提供了许多可定制的 CSS 类，让开发者可以轻松地创建页面并维护样式。但是，它的文档在中文社区中的使用较少，部分内容的翻译也存在一些错误。本文将针对此问题进行修正和翻译，帮助大家更好地使用 Tailwind CSS。
使用建议
在使用 Tailwind CSS 时，我们应当注意以下几个问题：
- 避免使用魔法数值：Tailwind CSS 可以让我们通过类名来设置样式，但是却容易让我们犯错。在选择样式时，应使用定义好的变量或者数字来设置。
- 不要使用多个类名来描述一个样式：一条样式应只包含一个类名，同时我们可以通过组合多个类名来实现需要的样式。
- 熟悉设计系统：Tailwind CSS 的设计系统非常复杂，包含了非常多的类名，了解这些类名的含义及用法，可以更加快速、准确的使用 Tailwind CSS。
翻译与错误修正
安装
原文：
# Using npm npm install tailwindcss # Using Yarn yarn add tailwindcss
翻译：
# 使用 npm 安装 npm install tailwindcss # 使用 Yarn 安装 yarn add tailwindcss
调整配置
原文：
npx tailwindcss init翻译：
npx tailwindcss init --full
解释：原文可能存在错误，使用 --full 参数可以生成完整的配置文件。
配置文件
自定义颜色
原文：
-- -------------------- ---- ------- -------------- - - ------ - ------- - ------- - ---------------- ---------- ------------------ ---------- -- -- -- --展开代码
翻译：
-- -------------------- ---- ------- -------------- - - ------ - ------- - ------- - ---------------- ---------- -- -------- ------------------ ---------- -- -------- -- -- -- --展开代码
自定义字体
原文：
-- -------------------- ---- ------- -------------- - - ------ - ------- - ----------- - -------- ---------- -------------- ----- ----------- -------------- -- -- -- --------- --- -------- --- --展开代码
翻译：
-- -------------------- ---- ------- -------------- - - ------ - ------- - ----------- - -------- ---------- -------------- -- ---- ----- ----------- -------------- -- ---- -- -- -- --------- --- -------- --- --展开代码
自定义背景色
原文：
-- -------------------- ---- ------- -------------- - - ------ - ------- - ---------------- - ---------- ---------- ------------ ---------- --------- ---------- - - -- --------- --- -------- -- -展开代码
翻译：
-- -------------------- ---- ------- -------------- - - ------ - ------- - ---------------- - ---------- ---------- -- ---- ------------ ---------- -- ---- --------- ---------- -- ----- - - -- --------- --- -------- -- -展开代码
实例代码
以下是使用 Tailwind CSS 来创建一个卡片样式的示例代码：
-- -------------------- ---- ------- ---- --------------- ------- ----- -------- ---------- ----------- ---- ----------- ------ ---- ---------------- ------- ------ -------- --- ------ -- -------------------- ----------- - ------------- --- --------- --- ------- -------- ------ -------- ---- ------ ---- ----------- ---- ----------- -------- ----------------- --- ----------- ---------------- ---- -- -------- -------------------- --------------------- ----- ---- ---- ----- ----- ------ ------展开代码
通过上述代码的运用，我们可以快速的创建出一个卡片样式。同时，使用 Tailwind CSS 的灵活性，我们还可以对样式进行自定义，便于快速迭代。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67be59cfa231b2b7ed18d3ef
