00:00:02 Now that you understand what Tailwind is and how it works, I want to teach you a couple of TailWind CSS tips and tricks.

00:00:07 The ones that I struggle with and the ones most people have no idea about.

00:00:12 First, let's explore a few special utilities.

00:00:15 Did you know that we can change the default accent browser color for elements like checkboxes and radio groups?

00:00:22 The only thing you have to do is provide a class of accent and then choose a color which you want to add, which gives you a completely customized look

00:00:31 of even the tiniest bits like checkboxes.

00:00:33 And usually when building a responsive website, these were the accents.

00:00:37 So I'll add a comment right here saying accent, and this was just the first trick of many.

00:00:43 Let me show you the second one.

00:00:44 It'll be all about fluid texts.

00:00:47 So usually when building a responsive website, you have to take care of the text size on different devices.

00:00:52 You'll have do something like this, like change the size of different breakpoints.

00:00:56 So it's bigger on larger devices and smaller on smaller devices, but did you know that there's also a custom style approach that you can use here?

00:01:05 Something like this.

00:01:07 Text min 10vw and 70 pixels.

00:01:12 So how this works is it is entirely fluid.

00:01:16 I mean, just check this out.

00:01:18 Whereas this first example changed only two times.

00:01:22 it is fairly big for a long time, and then even bigger, what you can do with this fluid approach is change it every single pixel that the screen size changes.

00:01:34 Pretty amazing, right?

00:01:35 Much smoother and more responsive.

00:01:37 Instead of relying on the media query, we kind of calculate the value depending on the screen size automatically.

00:01:44 Third thing I want to talk about is the file.

00:01:47 If you worked with file inputs, you know the pain of styling a default layout.

00:01:51 You might need to use a fully custom library or set the input display to none and then create your own.

00:01:57 Tricky, isn't it?

00:01:58 Thankfully, Tailwind provides a better solution.

00:02:01 It looks something like this.

00:02:02 You can define a label, and within it, you can find an input.

00:02:06 And then, the only thing you have to do is use the file prefix, which automatically applies all the customizations to the input The next step is all about highlights.

00:02:17 Let's say you want to override the default blue or other highlight that appears when a user selects a text on the screen.

00:02:23 Well, Tailwind CSS gives you a very simple solution to that.

00:02:27 Check this out.

00:02:29 By default, when you hover, it is blue, but by using a selection property, you can very easily change how it looks like.

00:02:37 Now, it is green.

00:02:39 You simply had to apply a class of BGGreen.

00:02:42 But if you weren't using Tailwind and you wanted to do this with manual CSS, well, you would have to write this kind of messy code.

00:02:48 This makes it so simple to be more creative and do whatever you want because you have complete control just by writing a few lines of code Now another

00:02:56 pro tip I want to give you is about writing less JavaScript.

00:03:01 Well, yeah, if you take the time to learn it well, you can perform so many tasks that are typically done using JavaScript with Tailwind CSS alone.

00:03:09 Sounds pretty crazy, right?

00:03:11 But think about how often you've made an accordion or relied on a library or states to manage it.

00:03:18 Doing something like that with Tailwind is super simple.

00:03:21 Check this out.

00:03:22 You can use the HTML5 details and summary components and then apply some kind of an open prefix selector and it just works by default.

00:03:31 Well, this is pretty crazy.

00:03:38 It is pink.

00:03:39 See this thing right here popping in and out, letting me know where my cursor is?

00:03:43 Well, that is called a carrot, if you didn't know, and you can make it any color you want.

00:03:49 And I want to say these were just some examples that shows just how of a unique tool Tailwind CSS really is.

00:03:57 There's even more, like before and active states, styles that only work on certain screen sizes like landscape or portrait,

00:04:05 Styles for area and screen readers, gradients, animations, and it even lets you apply styles when printing your website.

00:04:12 Covering all of these would be another course on its own.

00:04:15 So, I've put together a reference guide with some of the best tips and tricks to bring you to the pro Tailwind developer.

00:04:21 For now, it's completely free and linked below this lesson.

00:04:25 Simply grab it while you can and store it somewhere, so the next time you're doing something cool with TailWind, you always refer to it.

00:04:31 It'll also help with one of biggest problems that people experience when first diving into Tail Wind.

00:04:37 And that is, how on earth do you remember all those Tailwind classes?

00:04:41 I can't even recall what I wrote two minutes ago.

00:04:44 Well, let me tell you a little secret.

00:04:46 You don't have to memorize every single class.

00:04:50 As you keep working with TailWind, you develop muscle memory.

00:04:54 It's like riding a bike or tying your shoes.

00:04:57 you'll naturally know which classes to use for different elements.

00:05:00 Just keep practicing and before you know it, Tailwinds classes will become second nature to you.

00:05:05 You might wonder how you'll manage to write all of these classes while learning without watching any tutorials, but have no fear.

00:05:13 The last pro tip I can give you is to just head over to TailWinds CSS, press command K and start typing.

00:05:21 Whether you're trying to find a specific CSS property, such as border radius, and you were wondering how it works within Tailwind,

00:05:28 it is just a few keystrokes away.

00:05:30 I wrote my PDF guide in a similar way too.

00:05:34 So if you want to change the text color, super simple, you wanna see which colors you have access to, well, that's here too!

00:05:41 Trust me, TailWind is incredibly intuitive.

00:05:45 And in just a few days, you'll be creating UIs like a pro without constantly peeking at the docs.

00:05:51 It's all about practice and embracing that creative flow.

00:05:54 And on top of that, no matter which editor you use, whether it's VS Code or WebStorm, which is a fully-fledged IDE, You can install the Tailwind CSS official

00:06:04 extension that will speed up the writing of your TailWind CSS classes significantly.

00:06:08 And if you're using WebStorm, you'll also get an extra edge with features like color previews for your theme and detailed information on each Tailwind

00:06:16 CSS utility when you hover over it.

00:06:18 So if want to follow along and see exactly what I'm seeing, as of recently, Web Storm became completely free for non-commercial use.

00:06:26 I'll leave the link down in the description so you can download it So with that said, that's it for the TailWind CSS course.