Tailwind CSS Plugins I Wish I knew Sooner

so I'm pretty sure all of you guys love T1 CSS as I do and as many other developers do it makes our lives easier it's simple to use and we don't need a v CSS anymore but have you ever wondered what type of plugins you can use to 10x your developer productivity when it comes to Tailwind well in this video I'm going to explore some of these plugins that can make you more productive developer luckily for us this is awesome list in here that's called awesome tawin CSS that actually offers you and gives you literally all the awesome stuff libraries tools plugins or even ID extensions that you can use for t one for example if you click on plugins you're going to find a variety of plugins you can use from like typography to container queries in here or what you can basically use with forums the themes CSS variables and so much so I really advis to go ahead and look for that you can just type in awesome Tailwind CSS in GitHub and you're going to find this awesome list so first plugin of the day is called daui and it's a component Library made specifically for TNS it kind of gives you the chance to use pre-built components in here right into T1 CSS with simple to use classes for for example alerts in here like accordion maybe artboard Avatar so much more it literally has more than 55 components and the style this one is very simple so you just go to the docs install in here and you're going to find how to install this one you see you simply install the library in here Daisy at latest and you import this as a plugin inside of your tawin CSS config so you head over to twin. conf. JavaScript in here clar in here I'm importing the required DZ UI there's clar in here have D UI imported in here and a bunch of other plugs you going to explore throughout the video as well and when it comes to the usage it's pretty simple all you got to do is just use the right CSS or Twi CSS class alongside your regular T CSS classes for example I want to do a card so I can just label this container as a card and I can label as glass in here to have like a glassy sort of transparent kind of like background for the card and when it comes to for example oh I want the card body I can just en this as the card body C title uh for example card actions in here like for the buttons and stuff and so much more for example for stats in here you can just select stats stats stat figure in here if you just you know the image or the icon for the stat card I mean there's tons and tons of stuff in here and you can learn about every single class that you can possibly use and how to use it in the combination from the doc in here so if you head over to the components you're going to know oh this is actually the components for example the bottom component in here and it tells you media that you can use the button components in here button neutral primary secondary info success and so much more and even it gives you like simple easy kind of like examples in here or demos that you can easily copy with HTML GSX or even the preview of the different Bruns in here you can you know exploring stuff maybe looking for a responsive button this is how you basically do it so I find this super easy when it comes to you want to boost STP you know a new project using T CSS and want to do something quick you don't want to reinvent the wheel thesei can can actually give you all the components that you need without going ahead actually Reinventing the wheel creating those components or maybe installing this large or huge sort of like reacts component library or something you don't do that so just installing this UI with team with CSS and using the right classmate for that believe me it's going to make your life a lot easier and I've used this so many times and I really really like this one alongside like all over 30,000 person and with a fewer lines of code I was able to put something together like this even though it's messy but I've got something cool now the other plugin in here is signals for twin CSS I mean this lately has been going wild and a lot of developers including me really enjoyed using signals cuz it literally made the same sa of T when CSS in here and access in like ancestor State quite easy and super super enjoyable as we all know CSS like when you deal with descendants or ancestors kind of like State it's not really cool because it's pretty ugly when it comes to CSS so you have to do a lot of chaining and a lot of weird scn dexs but with signals it kind of like clarifies a lot of stuff and it makes it more declarative so for instance you can go ahead and check this simple example in here where we've got a simple checkbox in here and we've got a container in here so what we want is simply to turn this box in here into green whenever we hover over it or whenever this checkbox is checked so if you check the checkbox clearly it turns to green or if I go over it with the mouse it turns to Green as well so either way we want to activate this one I mean it may seem pretty simple I mean the hover in here is pretty simple but the check box in here is pretty tricky right let me tell you why It's Tricky so if you go ahead and check the actual code in here so we've got two components the first component is without tnd signals the second component is resiling signals the first one actually has an input in here like a sibling input and that input has another sibling which is the div in here which has you know that text or that particular container where we want to turn to Green whenever we hover or the check box is checked so what we checking if this saing sabling in here is checked we go ahead and turn this into green so how we're doing that we're using this kind of like syntax using in CSS where you do oh if the child of this particular container of this div like the child of this div which is this one if it's like has a a hover over the par div in here we want to access thatal trial and we're going to turn the background into green on the other hand for the check box we're just going to like name this as a paer we're using the paer kind of feature from T CSS to be able to use siblings so we're just naming this as a paer and here we are using if Peer checks which means if this check box has a check state in here we accessing the S the the child kind of like div right over here and we turning the background into green I mean it's pretty ugly syntax but when it comes to signals if we go down in here we're still using the per in here to check it out but now what we're doing is actually doing per checked and this is actually how we create the signal we're doing the colon in here and we name this our signal I mean this is the most simplest name of a signal but you can give it custom names we're going to see that in a second and we also doing oh if you over over that one we're also going to put that inide of a signal and by the way both of these are the same signal so we just like putting everything the hover States and the per checks on the same signal so later on with a signal in here we can say signal so if that signal is checks on this particular element the elements where we going apply the style so if that signal is particularly activated we can just go ahead and turn that background into green and as simple as that whenever we check it out in here it turns to green or we go over it with the mouse and again that's simply because we have the hover in here and we have the peer checks in here both put into the same signal now for a little bit more advanced example here we got kind of like the same thing we got a check boox in here whenever you click it this turns into green or you go over this kind of like outside container it turns to Green so but when you just like over over that particular button it doesn't change or anything but if you actually keep clicking that one like you activate this one like press and hold this turns into purple with this unicorn sort of like Emoji so again using the help of signals and this time we're going to actually give custom names into our signals we can make that happen super super easily so here we're actually using custom names with our Pier so we saying Pier checkable so we're giving this particular Pier a checkable name and we're giving this older in here like peer hoverable and remember peers just means siblings of particular you know because we we just like want to Target this particular but in here so that means the siblings of this but which is this div in this particular input so down over here on the botton here we're going to actually create an active state so it means if this button is active which means we're like clicking and holding the button we're going to create a signal that is named custom so this is actually how you name your signals or give them a custom Name by just you know doing the signal keyword then a for Slash and you give it whatever name you want and here what we're doing we're checking if Pier is checked for the checkable pier which means this particular perer the input in here so if it's actually checked we're going to create that into a signal in here it has no name it just like named as signal I want to do the pier hover hover here into the same signal as this one which is just Nam signal now later on remember now we got two kind of like signals we got a signal with name custom and we got another signal just with the name of signal they on here inside of the button itself or the de that is actually inside of the button where we're going to style things up so we can use signal custom so if that signal is activated we can just go and turn you know the background into purple and actually activate that same thing like signal custom in here and you do the after kind of pseudo element and put the content of that into like a unicorn you know way to change the contents and here we're simply doing the signal stuff so like if the signal is activated for the whole Rob of the checks not the actual click which you know give it a content of this you know terrified sort of emoji and for the signal in here just turn the background into green I mean it is actually that simple and signals make it look a lot easier to deal with and one quick thing for signals in here remember that signals are not widely supported just yet because they actually Depon the style queries which is an experimental feature in most browsers I know for Chrome and a bunch of others are actually supported but for stuff like Firefox and Opera I think oper now has a partial support Safari has a partial support but fire Fox is not like fully supported just yet so you can wait a little bit longer so I'm not sure if this should be used in production use case just yet but I'm pretty sure you know like an update for Firefox and mostly prob are going to be having these features sooner rather than later oh boy the other plugin is really interesting and I fell in love with this as soon as I started using it so the plugin is named mix for 10s it's actually from the same author as signals but this has a completely different way of dealing with stuff you can imagine this as like variables for JavaScript or variables in any programming language basically so again you install this pretty much the same way as you install any other plugin just npm install twin CSS mixings and you import that inside of your twin CSS or twin. conf. JavaScript now let's imagine we've got this simple form you know kind of like component in here where it has a username input a password input and a submit button and the most important part is actually two kind of like paragraphs in here one for eror if you sell it oh if you didn't enter a valid username or password just like have like an a message or something and here it just tells you like a helper message oh please fill out the form to continue or something so if you look back in here into our component without mixings what is like the traditional old way of doing this one I mean you can do this the same way so like for example you do Flex for the form in here let's say this is the H2 for the login we don't care about that now for the error in here you say oh I'm going to put this as text left text you know small or extra small in here and give it like a Rand of 500 input in here needs a margin bottom too and like a pading for or something and basically both of these two inputs have literally the same style in here like I'm just like repeating myself in here so I'm just putting the same style kind of like twice which makes it very ugly if you need to change one style like at one place so let's say you want to add oh I want to add a like a background red or something 500 I got to go ahead and actually do the same thing in here on the top for the other input which is not not very practical for example here we fill out the form in here I'm pretty much just using basically the same thing for printing that one the only difference is actually the color so you kind of like find a lot of similarities a lot of redundant sort of styles or classes are being reused and repeated over and over I mean with mixings you don't need to do that anymore so for example this component here that uses mixings so if you notice on the top and here on the form we actually Decor a bunch of mixings with custom name for example mixing input I'm naming this mixing and input pretty much the same custom naming as tan uses for peers groups or as we've seen in singles before so I'm just naming this mixing import I'm giving it margin bottom to the same thing for input I'm giving it rounded LG and the input as well for padding of two now I'm actually creating another mixing in here is called info and I'm giving it text left and I'm here the same thing for the info and I'm giving it text extra small now later on is cing for the two inputs in here actually this share the same style I don't need to repeat myself all I do because I created a mix in like a variable on the top in here on the parent form obviously so I all I going to go ahead and actually do is do mix in input so just call that variable in here and the Styles will be applied simultaneously and basically the same thing for you know the info in here mixing info I only just apply whatever color I want and the same for the error message in here they basically share the same Mixon so yes Mixon are pretty cool and the last one for today is members which as the read me here stats members for tawi CSS offers an inverse functionality to the builting groups feature of T cus so because T cus has already a feature called groups members in here is actually the inverse functionality of groups so again you can basically install this the same way as you did before and use it the same way and when it comes to user in here you can imagine for example we've got this container which is you know this is actually the text that is inside of the parent container and what I want is actually this is you know the check box in here is actually a child or you can call it like a descendant of the parent container so what we want we want to style the parent container depending on The Descendant state which is in our case the checkbox right over here so like whenever we click we turn the background into green and the background in here is actually the parents div background here's actually what it looks like without members and with members so without members in here basically do the same thing but we use the has variants from T CSS to check oh if it has and we check like the child's form which is a child of the pan div in here so if that form is valid we simply just go ahead and do that background or turn the back going into green but with members in here you don't need to go ahead and use that custom CSS or anything the code and just going to make it look a lot easier and simpler of course so all you got to do is actually you want like whatever descendants you want to have or access it stats from the parents elements on top in there so you simply do just go ahead and Mark that particular element as a member so you give it a class name of member basically the same thing with peer or groups but the inversed way and once you do that with member you can actually literally go ahead and access that member from from any parent or any ancestor for example member valid which means this form is valid if it is valid just going to turn the background into green for the whole diff or simply for the whole parents container well you can read more about that GitHub and read me about like exactly how he works with the different examples and pretty much sure going to be a lot of updates coming up next cuz now it's still basically 0.0.4 and most of these plugins are made by the same guy in here and I really really like these plugins so anyway guys thank you for watching this been plugins for T wi CSS that's going to actually make your life a lot easier and probably going to make you a little bit more productive see you hopefully in the next ones

Channel: CoderOne

Views: 4,740

Keywords: tailwind css, tailwind, tailwind plugins, plugins, javascript plugins, css plugin, css plugins, tailwind plugin, tailwindcss plugins, tailwind css plugins, tailwind signals, tailwind member, tailwind mixin, tailwind mixins, mixins, css mixins, css signals, signals css, signals tailwindcss, mixins tailwind, mixins tailwind css, daisy ui, daisy UI

Id: X5xrT7Nk_hQ

Length: 14min 38sec (878 seconds)

Published: Sun May 05 2024