Best practices
- Don’t use
@applyjust to make things look “cleaner”. Otherwise you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you. ← sources
TailwindCSS V4
- All directives such as
@theme,@source,@plugin
- Define custom font weight
- Alternative to
contentin old config ->@source
group-hover with prefix - Option 1
<div class="tw-group">
<div class="group-hover:tw-bg-slate-500"></div>
</div>- Option 2
<div class="group/tw">
<div class="group-hover/tw:bg-slate-500"></div>
</div>.not in tailwindcssExample: Don’t apply
:hover effect on the :disabled button[&:not(:disabled)]:hover:tw-bg-gray-500Color preview doesn’t show in VSCode
{
theme: {
extend: {
colors: {
'custom': 'var(--custom-color)', // not show
'hello': '#000', // show
}
}
}
}tailwind.config.ts