Tailwind CSS WIth SvelteKit Setup

hey friends hope you're doing well today we're going to talk about setting up Tailwind CSS with swellkit I assume you already know what Tailwind CSS is but I'm going to spend a minute explaining it and if you already know about Tailwind is just interested in the setup you can skip this part but basically Tailwind is a utility first CSS framework Tailwind CSS isn't a UI component framework because it just gives you some utilities so one utility in Tailwind corresponds to a single line of CSS so for example in Tailwind font bold is equal to you with your guess in CSS phone bald 700 or whatever but yeah let's get this out of the way and let's set up Tailwind with soul kit let's set up Telvin CSS you can create a new cell kit project or a Tailwind to an existing project and as always you can find example repository on GitHub so I'm going to open a terminal inside an empty project and I'm going to use pnpm but you can use whatever your answer I'm going to say pnpm create soiled and then we're going to go through the installer I'm going to leave it blank skeleton project so it's just empty typescript of course let's add this link and this one is important so you want to add prettier for the next step we're going to go through but if you're using an existing project and you don't have prettier for whatever reason I have some instructions in the post so you can set up prettier and it's basically straightforward just installing the package and that's it so we can say yes and then we can also add playwright but I'm going to do it right now and then we need to install the packages so I'm going to say pnpmi awesome now I can install some dependencies that Italians requires so we can say pin PMI development dependencies and we can say Tailwind CSS and then we need pulse CSS and auto prefixer so you can also give it a second for this to install and now we can create the Tailwind config so we can say pnpx Italian CSS is going to invoke the Tailwind CSS CLI and it's going to run this init script Tailwind config.cgis which is going to get created at the root of our project and let me close this and on this side we're going to see it created the file and it also created a post CSS config which you don't have to touch so you can ignore it for now and now let's just give it a file so it knows where the classes for Tailwind are so you can just replace this content you can just copy paste this I got this from the Tailwind documentation so really nothing special yeah let you just save this file and now we need to add the Tailwind directives to our CSS so again you can go here you can copy this over and I'm going to close this file and inside the project I have source and let me just see in routes there's nothing so I can just create app CSS it's a root or you can do whatever you want and now we just need to include this file in the layout because it's how you include the global CSS file in circuit in route so you can create layout salt and we can just create a script tag we can import the styles fcss and don't forget to passive slot and we can save it and you're done so let's see if it works so in routes here is the page let me just create a H1 again I can say heading and let me just start the development server pnpm run Dev and this should be available let me just close this so you can go to localhost 5173 and right now there should be enough is already no telling is working because Tailwind does unstyle by default for everything so for example we can go to app HTML in our project and on the body tag we're going to say class and since I have the Tailwind extension I'm going to get recommendations but you can say BG gray 900 and for the text I want it to be white and this is going to update which is awesome so you can close this and let's just set some Styles here so you can say class we can just say hey display grid 100 vertical Place content Center text this size let me just save it and now it should work awesome we got Tailwind working this is awesome but let's take our Tailwind experience to the next level by enabling automatic class sorting with prettier first make sure you have the prettier extension installed and is the default formater in your vehicle settings so if you press Ctrl X in my editor I can go and see my extensions and here we should see the Tailwind one I have Tailwind intellisense but I also have another one which is prettier here it is yeah so make sure you have that and then let me just close that if you press Ctrl p and you do the pointy boy start typing settings you can go to your settings Json and I prefer using Json over the UI because it creates a portable file even if you have automatic sync in vs code these days but yeah I always prefer this so I can just open that configuration file let me just close this and I'm going to find edits or format on save as you can see I have format on Save enable true so when you press save in your file it's going to pretty format everything and then the default format there is going to be this and of course I'm using the celt extension so the default formatter for that is going to be the swelled one and you can leave this and you don't have to change anything and also have instructions in the post if you're doing this for an already existing project how you can add prettier if you're curious but now let's get to installing the prettier plugin for Tailwind CSS so let me just close this and now I can open the terminal Ctrl C to stop the development server and now we can just install the plugin we can say pnpm i d prettier plugin Tailwind CSS install this and while this is installed let me explain that because swelkid uses prettier plugin soil so if you go to pack a Json prettier plug-in sweld basically the Tailwind CSS plugin does something weird so it conflicts with this plugin because it uses some third-party apis that aren't documented or whatever it's not important but basically we need to remove the swelled pre-tier plugin but thankfully the prettier plug-in Tailwind CSS includes the plugin for you so everything should work as before so now we just need to uninstall it and in my case this is pnpm remove so you can say prettier plug-in swelt and now we also need to remove the plugins from the pre-tier config this is a mistake I've done or let me just close this and I'm going to close back a Json so here is your prettier RC you just have to remove this plugins line because it's going to crash it and basically it's just going to pick up the Tailwind CSS plugin automatically for you so you just need to remove this line and then if you save it everything should work fine and I also mentioned in the post that you don't have to change your formatter and let's just see if this works so if I go here I'm going to close this Ctrl p and let me open our home page so I can do this and if something is not working you might need to restart your editor and I'm curious this is going to work so let's see Moment of Truth and awesome it works let me share some useful tailing CSS tips that are going to improve the quality of life for using Tailwind dramatically if you need a component library for Tailwind there's Tailwind UI but it's paid and if you're looking for a free one you can use Daisy UI so you can go to Daisy UI and it's the most popular free and open source tail in CSS component Library so if that's something you're interested in the components are gorgeous and it's awesome so give it a try but yeah let's go back to at least let's talk about extensions so if I press Ctrl X again you can see I have the Tailwind CSS intellisense extension and that's going to give you Auto completion in your editor so you don't have to look up the documentation constantly which is awesome so you can go straight ahead and you can install it if you want in vs code yeah this is basically it and you get this also Auto completions which would otherwise be a nightmare to remember but yeah that's the thing you tell me you really don't have to remember telling is in itself very intuitive to you so you're going to always know what you have to find but if that's not the case let me just close this you can use the Tailwind CSS cheat sheet to get a glance of what you need right now so you can find the options you need you can just have this open on your second monitor or whatever you can look at the values and this paired with the official Tailwind CSS extension is really powerful and also like to mention that you shouldn't forget that you can place your long class names inside the variable because this is another point that people have against alumn it's like all the classes are so long until it has the apply directive of course where you can extract your Styles but it's actually actively discouraged by the creator of Tailwind in this tweet confession the apply feature and tell you basically only exists to trick people who are put off by long list of classes into trying the framework so the Creator himself is saying that you should almost never use it and reuse your HTML instead so you can Chuck it in a variable and that's basically it it really tell me it doesn't really become a problem like it looks like a nightmare inspector site but you're often dealing with smaller components right and it's really not that bad inside those components it's just when it's all put together of course it's a soup of class names right but yeah if I go back another tip I have for you is enabling word wrap in your editor so if I go back to this example this is kind of like hard right when you're like working with these long class name so you can press Ctrl Z and you're going to have word wrap and it's going to make working with alien CSS much more pleasant and another thing I want to mention is the headwind extension if for whatever reason this automatic sorting of classes intelvin doesn't work for you in the past I remember using this extension and it's really awesome so you can give it a try if the other methods don't work for you alright so that's it despite the drama around Italian CSS is a great way for moving quick without distraction and it feels great because of it but it doesn't compensate for not understanding CSS because a Tailwind class is just a line of regular CSS and telemet CSS is not a UI component framework and it's also not all or nothing if you decide at a later point in your project that you don't want to use Tailwind anymore that's perfectly fine because it's a great prototyping tool and you can replace it with regular CSS using something like open props if you want alright so that's going to be it for me thank you for watching and catch you in the next one

Channel: Joy of Code

Views: 7,429

Keywords: svelte, sveltekit, tailwind css, setup

Id: J_G_xP0chog

Length: 10min 8sec (608 seconds)

Published: Wed Oct 12 2022