在这篇博客文章中，我不会说为什么要使用尾风。我介绍了足够的辩论。
这次，我将探索一些可以显着增强您的网络开发体验的逆风技巧。无论您是初学者还是高级尾风用户，希望您都能找到有用的东西。
让我们走！
动态实用程序类
尾风清除未使用的类。这就是它具有如此多功能的方式，并且仍然使我们的CSS捆绑尺寸较小。因此，如果您想使用动态类名称，则需要将要在代码中的某个地方写入的所有类名称。这是为了使Tailwind能够静态分析您的代码。
例如，这样的事情是不起作用的：
const DoesntWork = () => {
const colors = ['red', 'green', 'yellow'];
const [color, setColor] = React.useState(colors[0]);
const changeColor = () => {
setColor('green');
};
return (
<>
<div className={`w-40 h-40 border bg-${color}-500`}></div>
<select
value={color}
className={`bg-${color}-500`}
onChange={(e) => setColor(e.target.value)}
>
<option value="">choose</option>
{colors.map((c) => (
<option key={c} value={c}>
{c}
</option>
))}
</select>
<button onClick={changeColor}>Change color</button>
</>
);
};
那是因为尾风无法从静态上找到该类别。需要在运行时评估bg-${color}-500。但是，如果我们确实使用了完整的班级名称，则尾风编译器可以使其起作用：
const Works = () => {
const colors = ['bg-red-500', 'bg-green-500', 'bg-yellow-500'];
const [color, setColor] = React.useState(colors[0]);
const changeColor = () => {
setColor('bg-green-500');
};
return (
<>
<div className={`w-40 h-40 border ${color}`}></div>
<select
value={color}
className={`${color}`}
onChange={(e) => setColor(e.target.value)}
>
<option value="">choose</option>
{colors.map((c) => (
<option key={c} value={c}>
{c}
</option>
))}
</select>
<button onClick={changeColor}>Change color</button>
</>
);
};
在CSS内使用尾风
有时候我们被迫使用CSS作为我们的样式；例如，使用第三方库时。我们可以使用@apply指令或theme函数来坚持尾风颜色。让我们看一个代码示例：
.__some-external-class {
/* Using @apply we can use any utility class name from Tailwind */
@apply text-blue-300 bg-gray-300 py-2 px-6 rounded-lg uppercase;
/* or using the theme() function */
color: theme('colors.blue.300');
background-color: theme('colors.gray.300');
padding: theme('padding.2') theme('padding.6');
border-radius: theme('borderRadius.lg');
text-transform: uppercase;
}
任意值
在尾风内写纯CSS的另一种方法是用括号（[]）。这就是所谓的任意价值。您可以做这样的事情：
<div class="w-[100vw] bg-[rebbecapurple]"></div>
您还可以使用主题函数：
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
<!-- ... -->
</div>
如果您想引用CSS custom property，则无需使用var关键字（自v3.3以来）。您可以简单地将CSS变量作为任意值传递：
<div class="bg-[--my-color]">
<!-- ... -->
</div>
小组和同伴公用事业课程
tailwind允许我们使用诸如:hover，:checked，:disabled，:focus等辅助类别的辅助类别更改元素的样式（您可以find them all here）。因此，我们很容易做这样的事情：
<button class="bg-purple-500 border border-blue-500 text-white text-2xl uppercase p-6 rounded-md m-4 transition-colors hover:bg-purple-800 hover:border-blue-200 hover:text-gray-200">Click me!</button>
结果将为以下：
如果我们想根据另一个元素的状态更改样式怎么办？这是同伴和小组公用事业课程中用场的地方。
基于父状态的样式
例如，当父母将父盘变成组并使用group和group-hover:实用程序类时，我们可以更改子元素的样式：
<div class="relative rounded-xl overflow-auto p-8">
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-4 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3
hover:bg-sky-500
hover:ring-sky-500">
<div class="flex items-center space-x-3">
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24">
<!-- ... -->
</svg>
<h3 class="text-sm text-slate-900 font-semibold group-hover:text-white">New project</h3>
</div>
<p class="text-sm text-slate-500 group-hover:text-white">Create a new project from a variety of starting templates.</p>
</a>
</div>
将导致以下结果：
有更多的辅助课程可以修改子元素，这几乎适用于每个伪级修饰符（这里是the full list）。
基于同胞状态的样式
peer类修饰符可用于根据其同胞状态样式。您可以使用peer-{modifier}，其中{modifier}可以是任何伪级修饰符。
这是一个简单的例子：
<div class="flex flex-col items-center gap-20 p-10 bg-pink-400">
<p class="peer cursor-pointer">I am sibling 1</p>
<p class="peer-hover:text-white">I am sibling 2</p>
</div>
当我们徘徊在兄弟姐妹1时，文本将改变兄弟姐妹2元素：
你可以命名
使用group和peer，您都可以为差异组和同行提供独特的名称。
这是通过将/{name}添加到任何一个辅助类别的类来完成的，例如：
<div class="group/main w-[30vw] bg-purple-300">
<div class="group/hello peer/second h-20 w-full flex flex-col items-center justify-around">
<p class="group-hover/hello:text-white">Hello Wolrd!</p>
<p>All this code belogs to us</p>
</div>
<div class="peer-hover/second:bg-red-400 w-[200px] h-[200px] bg-blue-300">
</div>
<div class="group-hover/main:bg-green-200 peer-hover/main:bg-red-400 w-[200px] h-[200px] bg-orange-300">
</div>
向建筑商注册尾风组件
您可以将代码内的组件直接注册到builder.io的无头视觉CMS，并允许非devs将自定义组件拖放到构建器UI中。
这样做，you need to have a Builder account首先。然后，follow the docs to get set up。
完成设置并连接到建筑商后，请使用tailwind在存储库中创建一个组件。
让您假设您与Next.js合作我们可以创建一个新组件：
// src/components/card.tsx
export const Card = ({ text }: { text: string }) => {
return (
<div className="relative rounded-xl overflow-auto p-8">
<a
href="#"
className="group block max-w-xs mx-auto rounded-lg p-4 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"
>
<div className="flex items-center space-x-3">
<svg>
{/* ... */}
</svg>
<h3 className="text-sm text-slate-900 font-semibold group-hover:text-white">
New project
</h3>
</div>
<p className="text-sm text-slate-500 group-hover:text-white">{text}</p>
</a>
</div>
);
};
然后我们register the component to Builder：
// [...page].tsx
// Register this component for use in the Visual Editor
Builder.registerComponent(Card,{
name: 'Card',
inputs: [
// 'name' is the name of your prop
{ name: 'text', type: 'text' },
],
)
然后，我们可以通过构建器UI将组件拖放到我们的应用中，如左侧是构建器的下方，右侧是我们的Next.js App：
动画实用程序类
tailwind有一些非常有用且易于使用的动画实用程序课程。例如，我们可以添加过渡颜色类，并将持续时间设置为300毫秒，以对悬停的颜色变化效果平滑。我们还可以通过动画曲线和动画延迟：
<div class="... hover:bg-gray-300 transition-colors duration-300 ease-in-out" />
几乎所有动画属性都可以使用（对于完整列表see here）。
除此之外，还有其他预制动画，例如：animate-spin，animate-ping，animate-bounce和animate-pulse。
响应式设计
tailwind是一个移动优先的框架，这意味着未预装的实用程序对所有屏幕尺寸都有生效，而前缀的实用程序则在特定的断点及更高版本上覆盖了样式。这有助于首先编写CSS移动设备，因为您需要从较小的屏幕上定义。
让我们说我们想要图像或视频的网格。我们希望我们的设计是移动设备上的一列，然后在较大的屏幕上是2列，并且在桌面上有3列，例如：
这就是我们的写作方式：
<div class="grid grid-cols-1 gap-10 p-5 sm:grid-cols-2 md:grid-cols-3">
<div class="w-full aspect-video bg-cyan-500"></div>
<div class="w-full aspect-video bg-cyan-500"></div>
<div class="w-full aspect-video bg-cyan-500"></div>
<div class="w-full aspect-video bg-cyan-500"></div>
<div class="w-full aspect-video bg-cyan-500"></div>
<div class="w-full aspect-video bg-cyan-500"></div>
</div>
自定义min和max实用程序类也可用于更具动态的用例。此外，您可以在tailwind.config.js配置文件中添加自定义断点。
编辑器扩展
Tailwind CSS Intellisense extension对于您的IDE是尾风如此愉快的主要原因之一。它为您自动完成课堂名称，向您显示所使用的颜色，并在悬停在该类时的详细信息。
除此之外，您可以使用Tailwind Prettier plugin更漂亮地对课程进行排序。还有一个可能有助于您从一系列课程中有助于您的眼疮的生活质量扩展是Tailwind Fold。
。创建自定义实用程序类
我们可以使用尾风配置文件来创建我们自己的自定义实用程序类。如果我们想在应用程序中的多个位置中使用特定样式，这将非常有用。因此，如果我们想添加另一个盒子影子类，这就是我们需要做的：
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {
boxShadow: {
// Note that we can use the theme function in here as well
neon: "0 0 5px theme('colors.purple.200'), 0 0 20px theme('colors.purple.700')"
}
}
},
}
然后我们可以在代码中使用它：
<div class="w-20 h-10 rounded shadow-neon"></div>
可以扩展或覆盖任何尾风的任何东西。
创建自定义的后风插件
如果我们希望通过传递颜色来选择自定义实用程序的颜色，则需要制作自己的自定义尾风插件。这有点先进，但是它允许我们创建非常灵活和可重复使用的实用程序。
让我们重复我们的霓虹灯阴影示例。为了添加该功能，我们可以转到tailwind.config.js并定义我们的插件：
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: { // ... our previous config },
plugins: [
// to get the colors we can use the "theme" property
plugin(({ theme, addUtilities }) => {
const neonUtilities = {};
const colors = theme('colors');
// loop through the colors
for (const color in colors) {
// Check if color is an object as some colors in
// Tailwind are objects and some are strings
if (typeof colors[color] === 'object') {
// we opt in to use 2 colors
const color1 = colors[color]['500'];
const color2 = colors[color]['700'];
// Here we build the actual class name
neonUtilities[`.neon-${color}`] = {
boxShadow: `0 0 5px ${color1}, 0 0 20px ${color2}`,
};
}
}
// this adds the utility classes to Tailwind
addUtilities(neonUtilities);
}),
],
};
然后，我们可以在HTML（或JSX）中直接使用新创建的实用程序类：
<div class="m-20 w-20 h-10 rounded-lg neon-blue"></div>
请注意，我们可以更改为我们想要的尾风调色板中的任何颜色：
导入尾风颜色作为对象
我们可以将尾风颜色导入JavaScript中的对象。如果我们想使用尾风颜色创建自己的自定义主题，或在调色板中添加另一个名称，这将非常有用。
例如，我们可以创建一种primary颜色，该颜色将作为类添加：
// import all colors from Tailwind
const colors = require('tailwindcss/colors');
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {
colors: {
// set "primary" class name to desired color + set default.
primary: { ...colors.sky, DEFAULT: colors.sky['600'] },
},
},
},
plugins: [],
};
使用变体
构建组件时具有某种基本或默认样式时可以覆盖的常见用例。
tailwind-merge软件包对解决此问题非常有用。它允许我们将基本类作为第一个参数和类名作为第二个参数，确保我们的类名称覆盖了默认类（有关其工作原理的更深入研究，请参见this video）。
这里是一个例子：
import { twMerge } from 'tailwind-merge'
const SpecialButton: React.FC<{ className?: string }> = ({ className }) => {
return (
<button className={
twMerge('px-2 py-1 bg-red-500 hover:bg-red-800', className)}
>
Click me!
</button>
)
}
// Then we can override the style like so:
// some-other-component.js
const Component = () => {
<div>
<h1>Hello!</h1>
<SpecialButton className="bg-blue-500 hover:bg-blue-800" />
</div>
}
奖金：具有班级变体权限
CVA是一个包装，可帮助您以更优雅的方式创建变体。为了使其与tailwind-merge一起使用，我们可以做以下操作：
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";
const buttonVariants = cva(["your", "base", "classes"], {
variants: {
intent: {
primary: ["your", "primary", "classes"],
},
},
defaultVariants: {
intent: "primary",
},
});
export interface ButtonVariants extends VariantProps<typeof buttonVariants> {};
export const buttonClasses = (variants: ButtonVariants) =>
twMerge(buttonVariants(variants));
简单的梯度
您可以使用gradient color stops创建复杂的梯度。为此，我们可以使用bg-gradient-to-类，并将其与t（顶部），r（右），b（底部）和l（左）结合使用。我们还可以用tr（右上），bl（左下）等陈述角。
然后我们可以组合：from，to和via来制作一些令人惊叹的梯度。
让我们看看一些示例：
{ /* the first "to" 👇🏽 is specifiying the direction */}
<div class="bg-gradient-to-r from-indigo-500 ...">
{ /* the "from-" sets which color to start at and then fades out */}
渲染的输出将是一个以靛蓝为开始的梯度，并淡入透明：
要设置结局，我们可以使用to-：
<div class="bg-gradient-to-r from-indigo-500 to-pink-400...">
这将使梯度从靛蓝开始，然后淡入粉红色：
要添加披萨，我们可以通过使用：
之间使用via来控制中间的哪种颜色
<div class="bg-gradient-to-r from-indigo-500 via-green-400 to-pink-400...">
这将使几乎是彩虹梯度，因此：
轻松截断您的文字
另一个漂亮的实用程序类是line-clamp，它可以通过简单地添加诸如line-clamp-3：
之类的数字来截断多行文本
<article class="mt-20 border border-slate-300 rounded-md p-4 ml-6 text-white w-60">
<p class="line-clamp-3">
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud
occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex
occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu
dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut
cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure
quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint
voluptate sunt elit mollit officia ad enim sit consectetur enim.
</p>
</article>
渲染结果将在3行文本后放置一个省略号：
造型不可固定
造型诸如<input type="checkbox">之类的造型一直很难。不再使用accent-{color}修饰符：
<label>
<input type="checkbox" checked> Browser default
</label>
<label>
<input type="checkbox" class="accent-pink-500" checked> Customized
</label>
容器查询
许多人理所当然地兴奋的是new CSS features。它们允许根据元素本身的大小应用样式。现在有一个插件可以开始使用它们，以称为koude44。
将此插件添加到您的项目后，可以用@container标记元素，并且孩子可以使用@sm和@md等变体：
<div class="@container">
<div class="@lg:text-sky-400">
<!-- ... -->
</div>
</div>
结论
就是这样！这些只是使用Tailwind CSS时可用的众多技巧和技巧中的一些。凭借其广泛的公用事业课程和响应式设计功能，可能性是无穷无尽的。因此，发挥创意，玩乐，不要害怕尝试新样式和设计。使用Tailwind CSS，您可以轻松地创建美丽且功能齐全的网站。愉快的编码！ ð
通过您的组件在视觉上构建
Builder.io是一个无头的CMS，可让您在现有网站内带有your components的drag and drop。
// Dynamically render your components
export function MyPage({ json }) {
return <BuilderComponent content={json} />
}
registerComponents([MyHero, MyProducts])