Tailwind in 100 Seconds

Key Takeaways

tailwind a massive collection of tiny css utility classes for quickly and consistently building good-looking websites css is hard design is also hard but naming your css classes in a sane way is virtually impossible frameworks like bootstrap and material address this challenge by creating styles for high level components things like buttons drop downs and forms tailwind takes a more functional approach by providing you with utility classes that can be composed together to build components like this instead of using the card class like you might in bootstrap you combine utility classes like flex to make it a flexbox p to give it padding m for margin and hundreds of others to control things like color shadows and so on in addition every utility can be applied conditionally you have variants like small medium and large for responsive designs along with a bunch of pseudo-selectors like hover and focus to handle state changes or dark to render different colors when dark mode is enabled this approach gives you a lot more freedom over your creativity compared to other css frameworks while at the same time following the rules of a design system that you don't get with plain css it lives in the sweet spot between convention and configuration however it does produce some ugly ass html you've got tons of hard to read duplicated class names here as your ui grows in complexity code duplication is inevitable but you can avoid it by creating reusable components with your favorite javascript framework or by using the apply directive in css to take tailwind classes and compose them into a single concise class name another concern you may have is performance because tailwind weighs in at over 3 500 kilobytes but when you go to build for production it will automatically purge any unused utility from the final bundle resulting in minimal dead code and thus faster page loads but who has time to learn and memorize all these different utility classes where tailwind really shines is with its tooling you don't need to memorize much because vs code will auto-complete every tailwind class if you're not sure what it does just hover over it and it will show you the equivalent code in plain css and if you're not happy with what it does you can easily customize everything from the color palette to the spacing to build your own unique design system this has been tailwind css in 100 seconds make sure to like and subscribe if you want to see more short videos like this and if we hit 10 000 likes i'll make a full tailwind tutorial thanks for watching and i will see you in the next one