Styling Forms with Tailwind CSS

[Music] hello everybody in this video we'll be talking about the tailwind css official forms plugin let's get straight into it you may have noticed that out of the box form elements in tailwind are completely unstyled and no design opinions are baked in this is really handy because it lets us build the exact design that we want by composing utilities together without having that feeling that we're fighting against the framework's default styles so let's take this simple signup form and actually you can't even tell that there's form fields until i start tabbing through it with the keyboard so we're going to apply some styles i'll start with the email here so i'll add a class and let's start by making the field use the full width with w full and we'll also add a border color so you can see what's happening border and border gray 300 let's also add some padding so i'll go px3 for the horizontal axis and py2 finally i'll add some rounded corners with rounded lg and also a subtle shadow with shadow sm so it looks really nice but we'd also change the focus styles here so on focus i will go outline none and i will also change the border color with focus border indigo 500 and let's make the focus styles a little bit more present with the ring utility so i'll go focus ring and focus ring indigo 500 again and that's probably a little bit too big so instead of ring here i will go with ring one yeah very nice so now let's handle the password field and we can actually grab all of these and come down in our password input here and add a class and paste all of that so it's really easy to style an input text email or password but certain form elements are a little bit trickier so now we're going to add a select element to our signup form and also style it with utilities okay so i'll scroll down here and before my button i'll have a div here and i'm quickly going to copy the label from up here and put it in there but we're going to change passwords for company size and change this to company size inside of there i'll have another div with the class mt1 and we'll have a select element so the name is going to be company size so is the id and we're going to add a couple of options first option has no value and says please select and we'll copy this line over to have three more options so here's our select field here and we're going to add utility classes and actually because we want it to look the same we're going to try to copy the exact same set of utilities that we use for the email field and the password field so i'll come up here grab all this scroll down and on the select element here i'll add a class and copy all that so it looks quite similar but there's a few problems with it i don't know if you can see but the height is not exactly the same it's not respecting our vertical padding you can also see here that the arrow is not respecting the horizontal padding so if i change the padding horizontal to px4 our text here is going to move but the arrow is still up there also you may find that the appearance of this select element will be drastically different from browser to browser so it turns out that styling select element is a little bit more complex if we wanted to do so we would need to add an appearance none class which removes a lot of the default browser styling and now you can see that the height is the same but we have lost the arrow and now we would need to implement our own little drop down arrow with the background image and it gets quite complicated things get even more tricky when you try styling checkboxes or radio buttons and this is where the official tailwind css forms plugin comes very handy that plugin was designed to provide an opinionated reset for form elements and make things like check boxes radio buttons select elements super easy to style with utility classes it's really easy to get it set up and i'll show you that right now let's quickly go back to our completely unstyled elements so i'll remove appearance none and then i'll remove this set of classes we've applied three times so we're left with empty class names and you can see our signup form is back to its completely unstyled form elements okay so first we're going to install this forms plugin from npm npm install at tailwind css slash forms next now that we have it installed we're going to require it in our plugins array in the tailwind config file so right here i'll go require at tailwind css slash forms and when i save the file you should see the form update and here we go so you can see that the forms plugin has added some light default styles to our form elements but as you'll see in a minute it's been done in a way that still allows us to completely control and customize how these form elements look so let's try once again to add our custom style like we had before so with full we already have a one pixel border so we can change the border color with border gray 300 and we'll add our rounded lg corners our shadow sm in this case i don't even have to add padding utilities here because the defaults of the forms plugin are the exact same that what we had applied px3 and py2 as i'll show you in a second okay let me copy that set of utilities over and put it on our other two form elements just so our form looks pretty nice this is looking pretty good and now as you can see our select element has the same height and the arrow is positioned on the right place respecting the padding matter of fact let's actually go and look at what happens here under the hood by looking at the source code for the forms plugin okay so here we're looking directly at the node modules folder for the at sterling css forms plugin and the first interesting thing to notice is this plugin adds to the base layer element it doesn't add utilities it doesn't generate classes that you can apply but it styles the elements directly so here you can see that it's targeting a lot of different input types and also text area and select and then it's applying some css to these i just mentioned that it was applying the same padding values that we had and you can see here that the spacing values of two and three are used like we had used px3 and py2 if i go up here you can see that it's also applying appearance none and as we've just seen this is necessary to be able to properly style select elements checkbox radio buttons but it takes a little bit of work so if i scroll down here and we try to find our select element right here you may remember that when we applied appearance none before we had lost the little carrot pointing down and this is implemented right here as a background image so you can see we have an svg here with a specific positioning size etc this being taken care of by the plugin allows us to just focus on making the element look nice and like we want so if i scroll back to the top i just want to show you one thing here as you see here the forms plugin is not targeting the input elements directly but only the type attribute within that element the reason it's doing this is to avoid style collisions with other types of inputs like input type range which behaves quite differently that means that you always need to have a type attribute on your inputs using this plugin even if you used input type of text if you had skipped the type so here i'll remove the type password for example so as you see the forms plugin is not styling this input anymore because it doesn't find a type attribute which is the css selector used here so let's bring that back and let's keep going so it might be hard to notice but the outline on our form elements here is currently blue and not indigo and if you look at the css inside a forms plugin on focus you can see that the plugin is applying a border color of blue 600 and it's also using a ring of blue 600 which is the color you see here so let's go and implement that so i'll try select the classes for the three form elements because they applied exactly the same and i'll go focus border indigo 500 and focus ring indigo 500 so let's save and yep now we have on brand indigo 500 focus ring and border styles on our elements cool next let's add a checkbox to our signup form so i can show you how easy it is to style it with the forms plugin so i'll move down here and i'll just paste a little bit of markup and run you through it right so you see we've added this checkbox that says i agree to the terms and privacy policy and as per the code that i've pasted here i have a wrapping div that sets the display to flex and item center so it's going to vertically align the checkbox and the text then we have our checkbox here with no classes at the moment and then we have a label with some styles applied and it includes two links one here and the other here so let's click on the check box and you can see once again it has the default opinionated reset styles from the forms plugin but we can completely change how it looks let's head over to the source code and we're going to search for checkbox so here we are once again you can see that it sets the appearance to none and does a little bit of trickery to handle how to style a checkbox then it applies a height and width of the spacing scale level 4 as well as a color of blue 600 just like the outline of the other elements that we've seen before once again these styles are targeting the type attributes from the checkbox input so it's really easy to override with our css by for example adding a utility class so let's try change the height and width of 4 here so i'll go in my input type checkbox and i'll go h5 w5 and you can see the checkbox got bigger okay let's remove that and we can also change the rounded corners so rounded and you could if you wanted made it round it full i don't think it's a great idea because it now looks like a radio button but just to show you the possibilities and i think here we're going to go with rounded default let's change the border color to make it match our other form elements so we had border gray 300 and now here's a really cool thing i can change the color of the checkbox by simply adding a text color utility i don't have to worry about using appearance none and then re-implementing the check mark etc it's all done for me so let's try just change the color with the text utility let's try pink with text pink 500 and let's go check our check box now and you can see it's pink and of course you can do the same with the focus outline with focus ring pink 500 very cool so in our case we're going to make the checkbox itself indigo 600 and the focus ring indigo 500 let's look at it beautiful so we've seen that this forms plugin makes it extremely easy to style form elements just like we want with just utility classes and i think the next question becomes how do you customize this forms plugin and the default styles for example if i want to change the default outline color or the checkbox color or the internal padding how do i do this what if i want every form elements to have these rounded corners and border color that we've just applied because if we look here we have applied stars here and duplicated it and duplicated it again for three form fields we've already repeated ourselves three times so let's now talk about how we would go about making these styles that we have here the new default styles for the forms plugin looking at the plugin code you can see that it actually really just adds css to the base layer there is no javascript api to interface with it really just outputs a little bit of css and this css is generated using add base so it gets injected in the base layer over here well turns out that the way you can add or override the default styles of the font plugin is to add css to this base layer as well so i'll come down here and open an at layer base block and here's something critical to understand whatever we put in this base layer block here will come in the tailwind base layer but after the plug-in so we're gonna first have the plug-in styles and after this it's going to output our custom styles which is what we're going to put inside of here by using the exact same selectors that the plugin does we're going to be able to override the styles because our styles comes after in the css file due to the nature of the cascade in css selectors defined later in the file will take precedence so let me remove these two commands here and down there what are we going to write well let's say that we want this border color these rounded corners this subtle shadow and the focus styles for every one of our input types and the select text area etc well to make sure that we're actually matching the selectors that are used by the forms plugin we can go and grab these selectors so i'll grab all of this copy it i'll paste that in here and use that as our selector so here i can just write free form css so if i wanted large rounded corners i could go border radius and to make sure i have the same value i would use the theme function and reach for the border radius and we want the lg that said i can also here use the apply directive which is going to allow me to compose multiple utilities just like i've done in the html so i'll get rid of that and the equivalent would be at apply rounded lg so let me go actually in my html so i'll come in my email field here and i will go grab all the utility classes that we had applied and i'll copy that and actually i'll select these for the three fields email password and select and i'll delete them completely so now we should go back to you can see the rounded corners that we have applied and combined with the default styles and now back in our css down here i will apply all these utilities together and wait a second for the css to recompile and as you can see now our email input our password input and our select element have these default styles rounded corners border color shadow etc this is great remember that i've removed these classes from the html elements so this is all coming from the base layer okay let's do the same with our checkbox now so i'll scroll down to the check box which is right here and i will grab the rounded border gray 300 text indigo 600 and focus ring indigo 500 classes and remove them so if i save you can see now it's got the default styles again once again we're going to come in our plugins code and grab the same selector so checkbox and radio and in our css file in the base layer down here i will use these selectors and at apply the utilities we had together here and you can see our checkbox is going to jump back into the styles that we want but now they're applied by default alright so to sum it up the tailwind css forms plugin gives you a really useful forms reset that lets you styles form elements like select checkbox radio buttons really easily you can do this by applying utility classes to your form elements and if you find yourself wanting to customize or override the default styles from the forms plugin you can do so by adding styles to the base layer since this is what the plugin is generating its styles into okay that about wraps it up for this video thanks for watching and i'll see you in the next one bye for now

Channel: Tailwind Labs

Views: 50,098

Rating: 4.9842052 out of 5

Keywords:

Id: pONeWAzDsQg

Length: 17min 25sec (1045 seconds)

Published: Mon Mar 08 2021