Mastering Tailwind CSS: Hidden Gems & Productivity Hacks

Hello my frontend developer friends, today i will be sharing some useful snippets for tailwind css which will help you to create designs, layouts, transition and handling different states like hover, focus, group hover, etc.

• I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
• Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.

Lets dive in...
Table of contents

• What is tailwind?
• 1. Use apply derivative
• 2. Responsive design
• 3. Group hover
• 4. Dark mode
• 5. Line clamp
• 6. Generating classes dynamically
• 7. Grid Auto-Fill Magic
• 8. Theming
• 9. Has selector
• 10. Font styling using css variable
• Bonus - Card component group

What is tailwind?

• Tailwind CSS is a utility-first CSS framework that lets you build custom user interfaces quickly using pre-defined classes directly in your HTML. Instead of writing custom CSS, you style elements by combining small, reusable utility classes like p-4, text-center, or bg-blue-500.
• It could be installed via CDN, PostCSS or with frameworks like React or Next JS as a part of their CLI.

1. Use @apply to Reuse Utility Classes

If your classes become too huge to maintain in html tags, you could add those inside a custom class name with @apply directive and use that custom class name to apply the styles which will be readable in html structure.

/* styles.css */ .btn { @apply px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700; } 

<button class="btn">Click Me</button> 

2. Responsive Design in One Line

Responsive design could be added via breakpoints variants like "sm" for mobile, "md" for tablet, "lg" for laptops, "xl" for larger viewports.
Default viewport targeted:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

<div class="text-sm md:text-base lg:text-lg"> Responsive Text </div> 

• This text font size will change based on the viewport or device we are using to make it look better on smaller as well as larger screen sizes.
• You can do the same for other styles like widths, paddings, margings, spacings, changing layout like flex row to flex col in smaller screen sizes, etc.

3. Group Hover for Parent-Child Effects

• Imagine you want to style you child elements based on parent element states like hover or focus, well tailwind helps with these kind of transitions using "group" class.
• We could use group class in 2 ways - first way is to use the class as it is "group" and second way is to name the group like this "group/card". Second way is recommended in case if you want to use multiple groups nested within containers.
• Target child element styles using group - To change styles on child elements based on group, we could do that like this - "bg-white group-hover:bg-black" and with named groups "bg-white group-hover/card:bg-black". This will change the child element background color to black if the parent is hovered.

<div class="group hover:bg-purple-100 bg-purple-900"> <h1 class="group-hover:text-purple-600 text-purple-200">Heading</h1> <p class="group-hover:text-purple-600 text-purple-200">Some content</p> </div> 

4. Dark Mode Support with Ease

To change the styles on dark mode, we could use "dark:" variant to apply styles separately for dark mode

<div class="bg-white dark:bg-gray-900 text-black dark:text-white"> Dark mode enabled </div> 

5. Line Clamp Text Truncation

• Tailwind includes line-clamping for multi-line text truncation.
• Currently line clamp class is not supported in scribbler editor but you can check it out on codepen or in your local dev.

<p class="line-clamp-3"> This is a very long paragraph that will only show up to three lines... </p> 

6. Generating classes dynamically

Based on "4px" multiplication for numbers. Eg: tailwind has a default class for 20px padding as "p-5" but lets say you want a padding of 22px which is not available as default, you could do some math with floating point numbers and create a class accordingly like this - 22px = p-5.5 (5 x 4 -> 20 + .5 x 4 -> 2 = 22px). So to generate these type of numerical class, just divide the px value by 4 and it will be your class. NOTE: floating point only supports for value 0.25, 0.5, 0.75 since these 3 represent 3px.

// width = 384px, height = 320px <div class="w-96 h-80 bg-gray-900 border border-2 border-white"> <p> This is a very long paragraph </p> </div> 

7. Grid Auto-Fill Magic

Auto-fill responsive layout with no breakpoints!

<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4"> <!-- responsive cards --> </div> 

8. Theming

• Tailwind supports themeing from the css file itself, we could create theme variants and use those to style our elements based on the selected theme.
• Currently theming is not supported in scribbler editor but you can check it out on codepen or in your local dev.

@custom-variant midnight (&:where([data-theme="midnight"] *)); @custom-variant violet (&:where([data-theme="violet"] *)); 

• This will create 2 theme variants "violet:" and "midnight:"

<div class="midnight:bg-black violet:bg-violet-800" data-theme={theme}>...</div> 

• Here theme could be a dynamic variable or state, based on this data-theme value, the theme class for the background will be applied.

9. Has selector

• This selector is powerful since it allows us to change parent styles based on child elements styles or states
• Currently has selector is not supported in scribbler editor but you can check it out on codepen or in your local dev.

<label class="has-checked:bg-indigo-50 has-checked:text-indigo-900" > <svg fill="currentColor"> <!-- ... --> </svg> Google Pay <input type="checkbox" class="checked:border-indigo-500 ..." /> </label> 

• Here we are checking if the checkbox input is checked then the label background and text color will change. So, its a dynamic styling without JS, pretty cool, right?

10. Font styling using css variable

You could create a custom class with CSS font variables directly

@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; } 

• This will create a class "text-tiny" with font size 10px, line height 24px, letter spacing, 2px and font-weight 500, all of these with a single class name.
• You could do the same for other stylings like color, spacing, shadow, animation, etc. Checkout the tailwind official documentation to learn more about these.

Bonus

I have created a simple card component with some of these features:

Scribbler code - https://app.scribbler.live/?jsnb=github:ShubhamTiwari909/tailwind-tips-tricks-scribbler/tailwind-tips-cards&hide-menu=true&hide-code=false

That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.

You can contact me on -

Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck

Also check these posts as well

Button Component with CVA and Tailwind

Shubham Tiwari ・ Feb 12 '24

#nextjs #react #webdev #typescript

08:22

MicroFrontend - React | Solid | Vue

Shubham Tiwari ・ Jan 9 '24

#tutorial #webdev #beginners #learning

15:48

Codium | AI Assistant for DEVs

Shubham Tiwari ・ Jan 4 '24

#vscode #learning #tutorial #beginners

05:25

Zustand - A beginners guides

Shubham Tiwari ・ Nov 21 '23

#webdev #tutorial #react #javascript