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 that most people have no idea about.

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

00:00:15 Did you know that you 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.

00:00:41 And this was just the first trick of many.

00:00:43 So 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 to do something like this, like change the size on different breakpoints.

00:00:56 So it's bigger on larger devices and smaller on smaller devices.

00:01:01 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 The 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 define 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.

00:02:14 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 have 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.

00:02:55 Now, another 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:33 You can also modify the color of the carrot.

00:03:36 Check this out.

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 So, simply grab it while you can and store it somewhere, so the next time you're doing something cool with Tailwind, you can always refer to it.

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

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:56 You'll naturally know which classes to use for different elements.

00:05:00 Just keep practicing and before you know it, Tailwind's 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 Tailwind 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're 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.

00:05:37 You want to see which colors you have access to?

00:05:40 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 you want to follow along and see exactly what I'm seeing, as of recently, WebStorm became completely free for non-commercial use.

00:06:26 So I'll leave the link down in the description so you can download it.

00:06:29 So with that said, that's it for the Tailwind CSS course.