Tailwind CSS is a utility-first framework that makes designing elegant and functional interfaces a breeze. Here are some of the most useful tricks to enhance your Tailwind workflow and write cleaner, more efficient code.
1. Optimized Containers
❌ Incorrect
<div class="m-auto w-full p-6 sm:max-w-xl md:max-w-2xl">
...
</div>✅ Correct
module.exports = {
theme: {
container: {
center: true,
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
2xl: '6rem',
},
},
},
};
<div class="container">
...
</div>2. Simplified Sizing
❌ Incorrect
<div class="h-20 w-20">
...
</div>✅ Correct
<div class="size-20">
...
</div>3. Efficient Dividers
❌ Incorrect
<div>
<div class="border-b-4 border-white">Box 1</div>
<div class="border-b-4 border-white">Box 2</div>
<div>Box 3</div>
</div>✅ Correct
<div class="divide-y-4 divide-white">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>4. Spacing Between Elements
❌ Incorrect
<div>
<div>Box</div>
<div class="my-4">Box</div>
<div>Box</div>
</div>✅ Correct
<div class="space-y-4">
<div>Box</div>
<div>Box</div>
<div>Box</div>
</div>5. Arbitrary Variants
❌ Incorrect
<ul>
<li class="bg-red-700">item 1</li>
<li class="bg-red-700">item 2</li>
</ul>✅ Correct
<ul class="[&_li]:bg-red-700">
<li>item 1</li>
<li>item 2</li>
</ul>6. Typography Plugin for Markdown
<Markdown class="prose">
Usage with Markdown component renderer
</Markdown>7. Viewport Orientation Control
<div class="portrait:hidden">
This will be hidden in portrait mode.
</div>
<div class="landscape:hidden">
This will be hidden in landscape mode.
</div>8. Screen Reader Only Content
<span class="sr-only">
This content is only accessible to screen readers.
</span>9. Built-in Animations
<div class="animate-bounce">
...
</div>10. Print Modifier
<div class="hidden print:block">
Are you seriously trying to print this? It's secret!
</div>11. Smooth Scrolling
<html class="scroll-smooth">
...
</html>12. Highlighting Selected Text
<div class="selection:bg-black selection:text-white">
</div>13. Scroll Snapping
<div class="snap-x ...">
<div class="snap-center ...">Item 1</div>
<div class="snap-center ...">Item 2</div>
</div>
These Tailwind CSS tricks will streamline your workflow, enhance readability, and improve maintainability. Happy coding!
0 Comments