10 Tailwind Tricks You NEED To Know!

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

Channel: Ravi - Perfect Base

Views: 182,547

Keywords: Ravi, Perfect Base, perfectbase, React, Next.js, Typescript, Web Development, JavaScript, Frontend Development, React Tutorial, User Interface, UI Components, Web Application, tailwind css, tailwind css tutorial, tailwindcss

Id: aSlK3GhRuXA

Length: 10min 45sec (645 seconds)

Published: Sat Jun 24 2023