10 Tailwind Tricks You NEED To Know!

Summary

This video script offers 10 insightful Tailwind CSS tricks that can greatly enhance your development experience, regardless of your skill level. From leveraging peer and group utility classes to dynamically change styles based on element states, to understanding Tailwind's mobile-first approach and leveraging responsive utilities, the script covers a wide range of useful techniques. It also delves into advanced concepts like extending Tailwind with custom utilities and plugins, using colors from JavaScript, and a handy package for overriding component styles. With clear explanations and practical examples, this script promises to unveil valuable Tailwind tips that can streamline your workflow and improve your projects.

Takeaways

• 😎 Tailwind utilities like group-hover and peer can be used to style elements based on the state of other elements.
• 🌈 Tailwind provides easy-to-use animation utility classes for smooth transitions and preset animations.
• 📐 Tailwind is mobile-first, so unprefixed utilities apply to all screen sizes, while prefixed utilities override styles at specific breakpoints and above.
• 🔍 Tailwind's IntelliSense extension enhances the development experience by providing auto-completion, color previews, and class explanations.
• 🔑 Tailwind purges unused styles to keep bundle sizes small, so dynamic classes may need to be explicitly used somewhere in the code.
• ✨ The @apply directive allows you to use Tailwind classes within CSS, and the theme() function lets you access Tailwind theme values.
• 🛠️ Custom Tailwind utility classes can be created by extending existing utilities in the configuration file.
• 🎨 Custom Tailwind plugins can be created to generate dynamic utility classes based on theme values or other conditions.
• 🌈 Tailwind color palettes can be imported as JavaScript objects and used for custom themes or components.
• 🔀 The tailwind-merge package can be used to merge multiple Tailwind classes without conflicts, enabling style overrides in components.

Q & A

What are the 'group' and 'peer' utility classes in Tailwind CSS, and how can they be useful?

The 'group' and 'peer' utility classes allow you to style an element based on the state of another element. The 'group' class is used to group elements together, and the 'group-hover' class can be applied to child elements to change their styles when the parent is hovered. The 'peer' class works similarly but for sibling elements.

How can you animate property changes in Tailwind CSS?

Tailwind CSS provides built-in animation utility classes, such as 'transition' and 'duration', that allow you to animate changes in various CSS properties. You can specify the property to animate, the duration, and even add animation curves and delays.

What does the 'mobile-first' approach in Tailwind CSS mean, and how does it affect responsive design?

Tailwind CSS follows a 'mobile-first' approach, which means that unprefixed utility classes apply to all screen sizes, while prefixed classes override styles at specific breakpoints and above. This approach requires careful consideration when building responsive designs, as you may need to set the default styles for smaller screens and then override them for larger screen sizes.

How can you use Tailwind CSS classes with variables in JavaScript or a framework like React?

To use Tailwind CSS classes with variables in JavaScript or a framework like React, you can take advantage of the Intellisense extension or configure your IDE to recognize the variable names you're using. This allows you to get autocompletion and hover previews for Tailwind classes even when using them in variables.

What is the purpose of the 'purge' process in Tailwind CSS, and how can you ensure that the classes you need are not purged?

The 'purge' process in Tailwind CSS eliminates unused CSS classes to keep the final bundle size small. To ensure that the classes you need are not purged, you need to include them explicitly somewhere in your code, even if they are not directly used in the HTML.

How can you use Tailwind CSS styles in combination with regular CSS or third-party component styles?

You can use the '@apply' directive in your CSS to apply Tailwind utility classes, or you can access the Tailwind theme object in your CSS to use Tailwind colors and other theme values. Additionally, you can create custom utility classes in your Tailwind configuration file.

How can you create custom utility classes in Tailwind CSS?

You can create custom utility classes in Tailwind CSS by extending existing utilities or creating new ones in the Tailwind configuration file. This allows you to define your own reusable styles and use them throughout your application.

What is a Tailwind CSS plugin, and how can you use it to create dynamic utility classes?

A Tailwind CSS plugin is a way to extend Tailwind's functionality. You can create your own custom plugin to generate dynamic utility classes based on certain conditions or values. This can be useful for creating classes that can be parameterized or vary based on user input or other data.

How can you import and use Tailwind CSS colors in JavaScript?

Tailwind CSS colors can be imported as an object in JavaScript, allowing you to use them programmatically. This can be useful for creating custom color themes or applying colors dynamically based on data or user input.

What is the purpose of the 'tailwind-merge' package, and how can it be used?

The 'tailwind-merge' package is a utility that helps merge Tailwind CSS class names when there are conflicting utility classes. It allows you to combine base classes with additional overriding classes, making it easier to create reusable and customizable components with Tailwind CSS.

Outlines

00:00

🔥 10 Tailwind Tricks for Improved Development

This paragraph introduces a list of 10 useful tricks and techniques for working with Tailwind CSS, a utility-first CSS framework. It covers various topics, including styling based on element states, adding animations, understanding responsive design principles, using Tailwind with external libraries, creating custom utilities, and more. The goal is to provide tips that can benefit both beginner and advanced Tailwind users, ultimately improving their development experience.

05:02

🎨 More Tailwind Tricks for Enhanced Styling

This paragraph continues the list of Tailwind tricks, starting with importing Tailwind colors as JavaScript objects for easier theme customization. It then explores the `tailwind-merge` package, which allows for overriding styles and creating component variants. The paragraph also encourages viewers to subscribe to the channel and check out the creator's startup series for more content.

10:02

🚀 Closing Remarks and Call to Action

The final paragraph wraps up the video by encouraging viewers to provide feedback and subscribe to the channel if they enjoyed the content. It also mentions the creator's startup series and invites viewers to check out the related video, which has garnered the most subscribers to the channel.

Keywords

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes for building user interfaces quickly and efficiently. The video focuses on sharing tricks and techniques for better utilization of Tailwind CSS. It is the central theme around which all the other concepts revolve.

💡Utility Classes

Utility classes are the building blocks of Tailwind CSS. They are low-level CSS classes that apply specific styles to elements. In the video, various utility classes are demonstrated, such as `group-hover`, `transition`, and `animate`. These classes allow developers to style elements based on their state, apply transitions, and animations without writing custom CSS.

💡Responsive Design

Responsive design is the practice of creating websites and applications that adapt their layout and styling to different screen sizes and devices. The video addresses how Tailwind CSS handles responsiveness through its mobile-first approach and the use of breakpoint utilities. It explains how to create responsive layouts by applying different utility classes at different breakpoints.

💡Intellisense

Intellisense, also known as code completion or autocomplete, is a feature of modern code editors that provides suggestions and hints as you type. The video highlights the importance of Intellisense for Tailwind CSS, as it makes writing and discovering utility classes more efficient and user-friendly. It demonstrates how the Tailwind CSS Intellisense extension in Visual Studio Code provides class name suggestions, color previews, and class descriptions.

💡Purge CSS

Purge CSS is a process in Tailwind CSS that removes unused CSS styles from the final production build. This helps keep the bundle size small and optimized for performance. The video explains how Tailwind CSS eliminates unused classes and provides a solution to prevent unintended removal of styles by including all potential class names in the code.

💡Third-Party Component Styling

Third-party components are UI elements or libraries developed by external parties and imported into a project. The video demonstrates how to style third-party components using Tailwind CSS by overriding their existing styles. It introduces the `@apply` directive, which allows developers to use Tailwind utility classes directly in CSS.

💡Custom Utilities

Custom utilities are user-defined utility classes in Tailwind CSS. The video showcases how to create custom utilities by extending existing Tailwind utilities or defining new ones in the Tailwind configuration file. This allows developers to encapsulate complex styles into reusable classes and maintain consistency throughout their projects.

💡Tailwind Plugins

Tailwind plugins are used to extend the functionality of Tailwind CSS. The video demonstrates how to create a custom Tailwind plugin that generates dynamic utility classes based on user input. It explains the process of accessing theme values, looping through colors, and adding new utilities using the `addUtilities` function.

💡Theming

Theming refers to the process of creating a consistent visual style across an application or website. The video explores how to leverage Tailwind CSS for theming by importing its color palettes into JavaScript and using them to create custom themes. This approach allows for easy theme switching and maintains consistency with Tailwind's color system.

💡Class Merging

Class merging is a technique used in Tailwind CSS to combine multiple utility classes without conflicts. The video introduces the `tailwind-merge` package, which allows developers to merge base classes with additional user-provided classes. This is particularly useful when creating reusable components and enabling style overrides.

Highlights

Change the style of an element based on the state of another element using the peer and group utility classes in Tailwind CSS.

Use Tailwind's animation utility classes like transition and animation to easily add animations and transitions to elements.

Understand Tailwind's mobile-first approach and how to use unprefixed and prefixed utilities to target different screen sizes.

Get Tailwind CSS autocompletion and class details in variables and objects by configuring the Intellisense extension in IDEs like VS Code.

Understand how Tailwind purges unused classes and the workaround to prevent it from happening in specific cases.

Use the @apply directive and the theme object to apply Tailwind styles within CSS.

Create custom Tailwind utility classes by extending existing utilities in the Tailwind configuration file.

Build custom Tailwind plugins to generate dynamic utility classes based on specific conditions or user input.

Import Tailwind colors as JavaScript objects to use in custom themes or components.

Use the tailwind-merge package to merge and override Tailwind utility classes without conflicts.

Transcripts

today I'll show you 10 Tailwind tricks

that I really wish I knew earlier and it

doesn't matter if you're a beginner or

an advanced Tailwind user there should

be something on the list that will

improve your development experience so

let's get straight into it

you probably already know that we can

change the style of an element based on

its state

but what if you want to change the style

based on a state of another element this

is where the peer and the group utility

classes come in handy let's say we have

some elements inside this box let me

just Center them

all right so we want to change the style

of the children when the parent is

hovered for that let's turn the parent

into a group and use the group hover

utility to change the Styles in the

child elements let's make one red and

one blue and there we have it

here's the use case shown in the

Tailwind website when you hover the

parent element the children's Styles

changes and if you want to do a similar

thing with a sibling element then we

just do the same thing with the pure

utility class instead

and you can also choose a name for them

in case you want to use multiple groups

and peers but want to treat them

separately

okay this is a quick one but in case you

didn't know Tailwind has some very

useful and easy to use animation utility

classes from our last example if we just

add the transition color class and set a

duration of 300 milliseconds the color

change on Hover will slowly take effect

over the 300 milliseconds and we can

also even pass an animation curve in a

delay for the animation

and we can do the same thing for

basically any other animatable property

in CSS and there are also some preset

animations that we can use out of the

box that can be very useful

this one is very useful to understand if

you're building responsive designs let's

say we have a grid layout with three

columns we want it to change to a two

column layout when the screen becomes

small

[Music]

so let's use the small breakpoint to

change it to a two column layout on a

small screen well that actually didn't

work it's turned into a three column on

a small screen we want the opposite of

that that's because Tailwind is a mobile

first framework which means that

unperfixed utility stick effect on all

screen sizes while the prefix utilities

override the Styles at the specific

breakpoint and above so to fix our

example we need to write the default

style thinking on the smallest screen

size which will be the two columns

layout and then override it to three

columns for bigger screen sizes now it

works as expected and if we want we can

Target a specific range of breakpoints

Now it only turns into a three columns

layout on the range between the small

and medium

you can also use the Max and mean

modifiers to generate custom breakpoints

on the fly now our layout will change at

the breakpoint of 400 pixels and as an

additional tip you can also set custom

breakpoints for your theme on your

Tailwind configuration file

using Tailwind you're probably already

using the intellisense extension for

your IDE I'll be showing these and some

other tips using react on vs code but

you can probably apply it for your IDE

or your framework in my opinion this

extension is one of the main reasons why

Tailwind is so pleasant to use and why

it got so many users when you're writing

the style it will auto complete the

class names for you

it will show you the color being used

and it will explain the details of the

class when you hover it but you might

have noticed that you don't get any of

that when you're writing the classes in

a variable outside the HTML

well did you know you can get all this

good stuff here as well by default it

already works with some variable names

like class or class name and you can

even make it an object for all of your

variants but if you really want to be

able to use it with a specific variable

name that it's not accepted by default

you can just open your vs code settings

with this shortcut search for class

attributes and add the variable name you

want here

and now it will work with that new

variable name

or this one it's good to understand a

little bit of how Tailwind Works behind

the scenes let's say we have a select

input with some colors red green and

blue and we want to change the inputs

background to the selected color so

let's use a dynamic class name using the

color State now when we select green

well that doesn't work the thing is that

Tailwind eliminates all the classes that

are not being used this is how it's able

to have so many features and still keep

our products bundle size small since

classes don't explicitly appear anywhere

in the code they will be purged so to

make it work we would need to have all

the class names we want written

somewhere in our code

now the background color successfully

changes to the selected color even

though all we did was to add an unused

variable to our code for this specific

example we could just use this list for

the logic but if we wanted to have a

combination of all the colors and

intensity numbers it might be a little

too much to be honest when I have used

cases like this I just decide not to use

Tailwind for that part this tip was more

to help you understand how Tailwind

works so you don't get confused when

things aren't working the way you

expected and with that you finally made

halfway through the list if you already

learned something and you're enjoying

the content please let me know by liking

the video and subscribe if you feel like

it alright let's get back to the list

okay we all love to write our Styles in

Tailwind but there are still times where

we are forced to use CSS for our Styles

here we have a third-party component

from an external library and we want to

change the style which we can do by

overriding this class but we want to

stick with the Tailwind colors for that

all we need to do is use the add apply

directive and just like that we can

basically write the Theo in class just

as we would in HTML

another alternative is to use the theme

object we can grab anything set in the

Tailwind theme

the nice thing about this is that you

can also use it in the Tailwind

arbitrary utilities here if you have

this box and we want to give it a neon

like Shadow we can add a custom Shadow

like this this inside the brackets is

basically CSS when the spaces are

replaced with underscores and if we want

to use the tail in colors we can grab

them from the theme object

thank you

what if you want to use this neon Shadow

style in other places of our app for

that instead of repeating this class

everywhere we can use the Tailwind

configuration file to create our own

custom utility class this style is based

on a shadow so let's extend the Box

Shadow utility this is just CSS so we

can use the theme we talked in the other

trick to use the Tailwind colors here

and I'll actually add two Shadows a 5

pixel one with a brighter color and a 20

pixel one with a darker color now we can

replace our original Style with this new

Shadow neon utility and we can use it

anywhere in our app essentially anything

in Tailwind can be extended we can add

new colors custom breakpoints and many

other things

okay what if you want to be able to

choose the color of the neon Shadow by

obtaining the color here right now it is

fixed to purple because that's what we

put in our configuration to be able to

choose it we need to make our own custom

Tailwind plug-in so let's go to our

Tailwind configuration again and import

the plugin helper from the Tailwind CSS

package now we add the plugin to our

plugins list the plugin helper exposes

many Tailwind properties and functions

that we can use in our plugin we want to

grab the theme so we can access the

colors and we want to grab the add

utilities function that will allow us to

create our own kwin classes so now let's

initiate our empty utilities object we

want to add the classes here for each

color so let's grab the colors from the

theme and loop through the colors here's

where things get a little bit tricky if

we take a look at the colors object

we'll see that sometimes the value is a

string and sometimes it is an object

with a color palette in our case we want

to use the colors that are objects

because we want to use the 200 for the

bright color and the 700 for the darker

color so the first thing we need to do

in our Loop is to check if the color is

an object if it is we'll take the bright

color of 200 actually let's make it 500

this time and we take the dark color of

700 now we can create our neon class

inside our utilities object set our 5

pixel bright neon shadow in our 20 pixel

dark neon Shadow and finally we can use

the added till it is function after the

loop to add it to Tailwind now if we go

back to our code we can change this to

our new neon utility with any color we

want red green blue and the best part is

that autocomplete works and we can see

all the colors that we can use here

[Music]

I think this was the most advanced trick

on the list but hopefully I was able to

break it down well enough so let's go to

the next one

did you know that we can import a

Tailwind colors as an object inside

JavaScript this can be extremely useful

if you want to use the Tailwind crawlers

to create our own custom theme let's

make a primary color which will just be

the Tailwind Violet palette now we can

go to our code and start using this

color just like any other Tailwind color

and if we want we can also set it with

the spread operator so that we can add a

default color here now we can use the

primary color without a number and it

will use the 600 reset here I actually

use this trick in my startups landing

page and because of that I can easily

change the theme colors of my app while

still using the Tailwind colors

foreign

we finally arrived at the last one and

this one is actually a package that I

use in all my projects when I use

Tailwind let's say we're making our own

custom component styled with daywind but

we want to be able to override the style

if needed so we let the user pass the

class name

which will be appended to the default

classes now let's try to turn the text

to White

well that doesn't work the thing is that

the combination of the class names have

conflicting utility classes so only one

of them is going to be used to fix that

we can use the Tailwind merch package

all we need to do is pass the base

classes as the first parameter and the

class name as the second parameter now

our class name works because it's

overriding the default class this is

also very useful if you want to have

multiple variants for a component and

change the variant based on some

variables like we're doing in this Drop

Zone component here by the way sooner I

showed you the landing page of my

startup and I actually have a series

where I am trying to build a startup

from scratch as a solo developer and if

you're also interested in this type of

content make sure to check out this

video which as of right now is also the

video that gave the most subscribers to

the channel I hope you like it and also

let me know in the comments down below

if you enjoyed the video and if you

learned something new and yeah that will

be it for today see you in the next one