尾风出现在2017年，在新技术的炒作中幸存下来，现在它在许多项目和框架中都存在，因为Nextjs。尾风使样式变得更简单，更快且令人愉悦。
此博客文章最初发布在my website。
我已经成为了传教士，所以我想分享它的关键特征以及如何在日常工作中使用它。
在此博客文章中，我将介绍以下主题：
- Basic Usage
- Utility Classes
- Custom Theme
- Custom Properties
- Media Queries
- Element States
- !important
- Negative Values
- First and Last Element
- Peer
- Nested Elements
- @apply
- Prefix
- Playground
有关安装和配置的更多信息，请参阅official Tailwind documentation。
基本用法
Tailwind利用HTML类应用CSS样式。例如，我们可以按照尾风定义文本的颜色，大小和线条高。
<p class="text-red-500 text-base">Hello, World!</p>
相反，使用纯CSS，我们必须创建一个类并在元素中使用。
.text {
color: red;
font-size: 12px;
line-height: 18px;
}
<p class="text">Hello, World!</p>
以及使用样式的组件，我们需要导出组件，导入并使用它。通常，此元素将在一个单独的文件中。
export const Text = styled.p`
color: red;
font-size: 12px;
line-height: 18px;
`;
import * as Styles from './styles.js';
// ...
<Styles.Text>Hello, World!</Styles.Text>
您可以看到，我们可以通过用尾风编写更少的代码来实现相同的结果。
公用事业课程
起初，可能需要一些时间来记住这些课程，但它们遵循一种模式，随着时间的流逝，它变得自然而然。官方文档提供了所有类的列表，但最常用的文档是：
-
w-x-宽度 -
h-x-高度 -
p-x-填充 -
m-x-Margin -
mb-x-Margin Bottom -
mt-x-保证金顶 -
ml-x-边距 - 左 -
mr-x-边缘右 -
px-x-填充和填充右 -
my-x-保证金顶和保证金底部 -
text-x-字体大小和颜色 -
leading-x-线高 -
bg-x-背景色 -
rounded-border -radius -
flex | block | hidden | grid-显示：flex |块|无|网格
Read more in the official documentation
我强烈建议使用VSCode Tailwind CSS IntelliSense extension，它建议并显示您输入时所有类的值。
自定义主题
tailwind带有默认主题，但您可以自定义以满足项目的需求。
为此，只需在项目的根部创建一个tailwind.config.js文件，然后定义要自定义的属性。
module.exports = {
theme: {
extend: {
colors: {
'blue': '#1fb6ff',
'green': '#13ce66',
'gray-dark': '#273444',
},
spacing: {
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}
Read more in the official documentation
自定义属性
尾风主题具有广泛的属性和样式，可能涵盖您的设计规格。
但是，如果您碰巧需要主题中不存在的属性，则可以使用-[x]定义一个不同的值。
<p class="text-[red] text-[100px] w-[50%]">Hello, World!</p>
对于带有空格的属性，您可以使用下划线_将值分开。
<p class="w-[calc(100%_+_10px)] shadow-[0_35px_60px_-15px_#333]">Hello, World!</p>
Read more in the official documentation
媒体查询
要使用断点，您可以使用前缀sm:，md:，lg:和xl:。
<p class="text-red-500 sm:text-blue-500 md:text-green-500 lg:text-purple-500 xl:text-yellow-500">Hello, World!</p>
要更改断点的尺寸，只需修改tailwind.config.js文件中的screens属性。
module.exports = {
theme: {
screens: {
'sm': '576px',
// => @media (min-width: 576px) { ... }
'md': '960px',
// => @media (min-width: 960px) { ... }
'lg': '1440px',
// => @media (min-width: 1440px) { ... }
},
}
}
Read more in the official documentation
元素状态
tailwind还使用前缀来设计元素，具体取决于其状态，例如hover:，focus:，active:和disabled:。
<button class="bg-blue-500 hover:bg-green-500 disabled:bg-slate-600">Click here</button>
Read more in the official documentation
！重要的
要在CSS中使用!important属性，只需在课堂之前添加!前缀。
<p class="!mb-0">Hello, World</p> <!-- margin-bottom: 0 !important; --->
Read more in the official documentation
负值
要使用负值，只需在类之前使用-前缀。
<p class="-mb-4">Hello, World</p> <!-- margin-bottom: -1rem; --->
Read more in the official documentation
嵌套元素
为子元素进行样式，只需使用括号内的&>前缀。
<div class="text-blue-700 hover:[&>.text]:text-red-700 ">
<p>I'll not be red on hover.</p>
<p class="text">I'll be red on hover.</p>
</div>
Read more in the official documentation
第一个和最后一个元素
代替使用:last-of-type和:first-of-type选择器来自定义一组同级元素的第一个或最后一个元素，您可以使用first:和last:前缀。
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
这在循环中非常有用。
<ul>
{#each people as person}
<li class="mb-10 last:mb-0">...<li>
{/each}
<ul>
Read more in the official documentation
同行
根据其层次结构兄弟姐妹的状态进行样式元素，请使用peer类和前缀。
<input type="email" class="peer"/>
<p class="invisible peer-invalid:visible text-pink-600">
Please provide a valid email address.
</p>
Read more in the official documentation
@申请
有人认为，尾风的缺点是，它通过在HTML中添加许多类而使代码不那么可读。
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 1</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 2</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 3</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 4</p>
虽然这可能是有效的，但您可以使用@apply进行分组，重用它们并使代码更清晰。
.my-text-base {
@apply text-base text-gray-800 mb-3 last:mb-0;
}
<p class="my-text-base">Text 1</p>
<p class="my-text-base">Text 2</p>
<p class="my-text-base">Text 3</p>
<p class="my-text-base">Text 4</p>
Read more in the official documentation
字首
如果要在项目中添加尾风并避免与其他类别发生冲突，则可以将tw-前缀添加到尾管类中。
module.exports = {
prefix: 'tw-',
}
<p class="tw-text-blue-400">Hello, World!</p>
Read more in the official documentation
操场
tailwind有一个操场，您可以在其中测试所有这些功能等。只需访问链接即可。
结论
我希望您喜欢我的博客文章，并且我说服您使用tailwind。如果您有任何疑问，请随时在下面的评论部分中询问。