Tailwindcss Tools you can't live Without as a Developer

so you're probably wondering how professional developers can use Tailwind csns to build websites like this maybe like this for the NASA maybe Netflix which is all built using tables you guys says or even this really awesome design well in this particular video we will see top tools you can use as a Tailwind CSS developer to build top-notch professional websites and those tools are going to be more of like vs code extensions Tailwind CSS plugins that's going to boost your productivity and online tools and website you absolutely need as a developer so we're all familiar with chain one CSS and how awesome it is to be able to use like pre-made utility class inside of your application to style you know the whole application with a bunch of stuff and with the pre-made stuff but for some of you who already uses something like standard components who love the way that having CSS in JS actually works and just like you know the separating concerning working all those others you're probably missing like using Tay wind and in a style where you have it like CSS and GS but it still uses sandwich is that even possible well likely for us there is like absolutely everything is possible in the tech world and particularly there is a really awesome library in here called to you in macro it's more of a macro or a babble macro if you're familiar with those it's not like a library but that's going to allow you to blend the magic of staywind with the flexibility of CSS and JN and in fact it's gonna allow you to use something like this so you can import T win and you can use exactly team wind right into the input in here for having like csn.js or you can have it the same way as you would do it with style components you create like a component like a custom input component then you can reuse it or maybe override that a bunch of stuff or whatever is actually possible in the sound component kind of word you can do it with t win in here and you can support every single aspect of 101 CSS so if you want to get started with this and installing your projects it's pretty much available for all projects whether you're using parcel webpack the create reactor fight in here which is I should I should name this Vape but yeah if you're series and vet for example in my case in here which a lot of people were just migrating to Vietnam days you can install it really easy you can just go and install like a couple of like you know uh initialize create stock components you install the macros and then Pebble macros and all the all the stuff in here and you can do some some sort of like you know setup in here it's just pretty easy and pretty straightforward after that you can actually get started and start using it so for example in my projects in here I already signed up and everything I already put like the two in for the bevel macros in here I also just avoid the config file or the config kind of like root file you put in here it's better to put in the back.json so to see the actual benefit of using Tailwind in a CSS and JS kind of Style versus using it just like in putting it in classes and how we regularly use that we got a simple application in here we got like an application that is like an e-commerce store that just gonna you know show you a bunch of products and everything so for instance if you jump to the actual implementation in here I got two for the for the products in here got the bad implementation and it got the index in here which is like the good and implementation so for the bad one in here let's see why this is bad this is just using the regular like table and CSS without using csngs without using T win and just putting the classes right into the GSX itself which makes it super kind of like ugly and super confusing to be honest I'm not a big fan of this way I absolutely hate this way and putting classes right over here so if you try for instance to go through the lock product space because you see there's a bunch of CSS classes or a bunch of T win classes utility classes are just making it super hard to read and you don't know exactly which one does a bunch of divs in here which makes it not readable you don't know what this section actually means or what the top section or the middle section in here what is this for and plus obviously you read the code and you go deeper into the code unless like you won't understand otherwise but if you jump to the good implementation in this one we're using T1 excuse in him I'm pointing team win from the T1 macro and I'm doing t-u-n.dev and I'm just using csng.js and it's curious in here I'm actually using teens is kind of utility classes right into this it's basically the same style as you would do in style components so I'm putting all of those like product container content title rating uh reading value a bunch of them and if they jump to the GSX real quickly as Chris in here the GSX now is so much easier to read it's like super tiny you know exactly like oh this is a detailed section this is a price this is a button for add to cart this is rating this is raining value we've got the content in here we got for example this is a thumbnail you know this is actually the main container and it just like you don't need those extra classes and if you ever need to go change this you can click on it it's going to take you right into the implementation and you can do whatever in here like you want to add a background color sort of thing whatever maybe you want to add a color of adobe um on the background in here which I already have a white one yeah you can do that and one other way you can actually use this without the t-un or exactly with the stock components sorry let's imagine here we got a thumbnail image we've got stock components and let's say we want to pass some props into our thumbnail image in here like you know as we do it with some components so we create some components we do it like an image or whatever we pass in the prompts in here let's say when I'm going to pass an East large kind of props into this component and I can use T win straight into sound components an excuse in here I can use any class I want and particularly I can use like whatever prompts I passed it through in here I can interpret that and it can just use it to decide which Tailwind CSS class we utility I want to apply versus which I don't want to apply it's super now if I go to look at some vs code extensions that's going to help you a lot working with your tingling code it's going to improve the productivity and just help you in general um speaking of which there is a really awesome kind of like extension that allows you to sort out all the utility classes in here in kind of like whatever order you want you can configure that order but it just like sorts it out with like a default class order coming from the official team with CSS so for example here we've got this component in here that has a class name and it has a bunch of Tailwind CSS classes so using the headwind extension this will always to automatically sort whenever we hit Ctrl s or whenever we like save our file in here so as curiously we got the interior classes now they are not like ordered the same way there officially should be so if I click Ctrl s and it should be like having the right order where you have like the display then you have the wave again then you have the text then the background is last in here so this is like the you know the regular order that you should put your CSS classes or your attainment CS classes at novc you can customize that however you want on the headwind configuration and if we don't get the actual awesome ability to have vs code actually recognize that and give you an into license of the Taiwan classes whenever you use TV in here with with this like CSS and GS style something like this where you do like background for example it's just going to give you this really awesome enter license and you can go through all of those and you can select for example uh whatever like you know colors you got in here there's a really awesome extension for that it's called tawind T win enter license and another really awesome continuing vs code extension that I absolutely loved whenever in like since I started using this it has been absolutely amazing because before whenever I wanted to know about some utility class or I want to know some documentation and go to Google to start Googling stuff but there is no more of that with this is really an awesome extension so this is basically going to allow you to access the documentation is create from your vs code editor all you're going to do is actually open the palette which is like like command shift p if you're in mac and all you do is just like 10 wind and you can give you a bunch of stuff for example I want to do something win I want to know about the text align so you go 101 docs click that this is gonna go ahead and open that documentation straight through without me going to Google stuff now for Tailwind plugins there is two awesome plugins I absolutely adore so the first one called taiwin debug screens and this particularly is going to allow you to know which screen size you're currently on for responsive design so let's create for example in here a screw you've seen here the web page in itself your screen this is a small screen and if you just resize the webpage it's going to tell you XL double XL so on and so forth so if you go to the responsive design here it's cruising like as they resize the web page in here I know like this is SM or MD or LG and it's just so on and so forth and it's going to help you a lot debunk and work with responsive kind of design on your Tailwind CSS projects and the other awesome plugin in here is called T1 CSS brand colors which allow you to use like common and you know well-known Brands like Google or maybe twitch Reddit Facebook like you know the the color palettes of those and Museum directly on your Tailwind project I like this because you can simply do for example I want to text and I want to go ahead and do an Airbnb kind of like color text I want a background color of adobe or something and you can use that straight through without without going and searching and copy pasting them and for simply installing those just install table and see it says debug screens and the brand colors in here and you go to the tune configuration inside the plugins you need to require both of these and that is it this is all you need to do and those plugins are going to just like start working at me now when it comes to really awesome 101 CSS tools that's going to help you and boost your productivity and just gonna make you do small tasks actually faster without going through the complicated Parts well first one there's actually the tail blocks which is tailblocks.cc in here and this one is just absolutely amazing it's open source it's free of charge and you can use it however you want and this one it does actually owe you you can actually use pre-built components and you can just go to like for example this this e-commerce it allows you to you if you like a different e-commerce products this is a design of e-commerce store you can go to the view code and you can copy the code like literally copy the code and the code in here is built using table with CSS or maybe you want a CTA here maybe you want a login page and a sign up page you can do that uh features there's a bunch of stuff and as you go down and down maybe you've got like a footer in here via the code you can just copy the code in here go YouTube projects paste it there and done there's another website as well which is called 10 win toolbox so table toolbox.com by the way you're going to find all these links down the description below don't worry and another really awesome tool that I know every single team win the CSS developer should use it's kind of allow you to actually create your own like custom gradients on tailwind and you can have it for example you can select different colors and you can say oh and we use the from variant or the two or like however you want to put it in here and last but only is a really awesome tool for CSS guns and 10 with CSS guys it's a tool that allows you to convert actual cjss code right into 101 CSS code so anyway guys thank you guys for watching hope you enjoyed hope you liked these tools and hope you can use them to boost your productivity

Channel: CoderOne

Views: 49,394

Keywords: react, tailwind, tailwindcss, react tailwind, react tailwindcss, tailwind tools, tailwindcss tools, tailwind css, tailwind plugins, tailwind vscode, vscode tailwind, tailwind course, learn tailwind, master tailwind, tailwind react, tailwind beginners, tailwind pro, tailwind design, css to tailwind, tailwind vs css, html tailwind, tailwind gradient, tailwind animation

Id: CCgpk64orZo

Length: 10min 36sec (636 seconds)

Published: Mon Nov 28 2022