Take your Tailwind CSS project to the next level with the help of Tailwind CSS examples shown below.

Faun

Learn top tips and tricks to enhance your Tailwind CSS projects, including how to properly delegate classes, manage spacing between elements, and avoid overuse of the @apply utility. Discover how to add opacity, transitions, and animations, utilize group hover and pseudo-classes, and customize input values. Check out the provided resources for pre-made components and use the Tailwind IntelliSense plugin for an improved workflow.

Top Tips and Tricks with Tailwind CSS

my god, those are not tips and tricks, is basic tailwind use, just read the documentation for god’s sake

Very nice article 👍.
I may add for opacity, you’re not obliged to separe <code>bg-teal-700</code> and <code>bg-opacity-50</code>, you can combine them with <code>bg-teal-700/50</code>, if I don’t say bs.

These are just some basic things used in Tailwind.
These are the tricks if you may say
<ul>
<li>Use the line-clamp class to truncate text after a certain number of lines.</li>
<li>You can also use it in a heading like this text-[clamp(1.75rem,2.5vw,2.25rem)]</li>
<li>Use <code>*:{utility-class}</code> to apply styles to direct child elements</li>
<li>Use <code>size-*</code> in place of <code>w-*</code> and <code>h-*</code> if they are same(square)</li>
</ul>

Didn’t know about the <code>after</code> qualifier for pseudo-elements. Nice!