Welcome back! In our previous lesson, you successfully created your first SvelteKit project and began to understand its file structure, especially how its + file-based routing compares to what you've used in Next.js. You now have a blank canvas ready to go.
Today, we'll equip that canvas with the tools for styling. As you requested, we're going to integrate TailwindCSS into our SvelteKit project. This lesson is entirely hands-on and will walk you through the installation and configuration process step-by-step. By the end, you'll have a fully functional setup, ready for building components with utility-first styling.
The general workflow—installing dependencies, generating configuration files, and importing a main stylesheet—will likely feel familiar from your experience with the MERN stack and Next.js.
Setting Up TailwindCSS: A Practical Walkthrough
While there is official documentation, the most effective way to learn is often by watching and doing. The following video from the Joy of Code channel provides a clear, concise walkthrough of the entire setup process. We will follow its steps to get TailwindCSS running in the project you created in the last lesson.
Tailwind CSS WIth SvelteKit Setup
This video covers not just the installation, but also testing the setup to make sure it works.
Watch the segment from the beginning up to the point where the host verifies that the installation is successful by styling a heading. As you watch, I recommend you follow along in your own project. Project & Dependency Setup: This covers installing tailwindcss, postcss, and autoprefixer as development dependencies. Configuration File Setup: Here, you'll use the Tailwind CLI to generate tailwind.config.cjs and postcss.config.cjs, and then configure the content path in the Tailwind config. This step is crucial, as it tells Tailwind which files to scan for utility classes. Importing CSS: This section shows how to create a global app.css file with the @tailwind directives and import it into your root layout (src/routes/+layout.svelte). This makes your styles available across the entire application. Testing the Setup: The host demonstrates how to test that everything is working by applying a few utility classes to change the background and text color. This is an important final check.
At this point, you should have a working SvelteKit project with TailwindCSS integrated. When you run npm run dev, you should be able to add classes like bg-blue-500 or text-lg to your HTML elements in +page.svelte and see the styles apply in your browser.
For reference, the official TailwindCSS documentation provides the definitive written guide for this process. It's a great resource to bookmark.
Install Tailwind CSS with SvelteKit
The official guide serves as the source of truth for the installation process. The video you just watched is essentially a live demonstration of these steps.
Skim through the entire guide. Notice that the official guide now recommends using a Vite plugin (@tailwindcss/vite), which simplifies the setup by removing the need for a separate postcss.config.js file. While the video's method using postcss is still very common and works perfectly, the Vite plugin is a slightly more modern approach you might encounter. For our project, either method is perfectly fine.
Pro Tip: Automatic Class Sorting with Prettier
One of the minor pain points of TailwindCSS can be long, unordered strings of utility classes in your markup. This can make code harder to read and maintain. A professional workflow often includes tools to automatically manage this.
The Joy of Code video continues with an excellent tip on how to set up a Prettier plugin that automatically sorts your Tailwind classes into a logical, consistent order every time you save a file. This is a "set it and forget it" improvement that significantly enhances the developer experience.
Tailwind CSS WIth SvelteKit Setup
Let's continue with the same video to set up automatic class sorting.
Watch the next segment on configuring the Prettier plugin. The host clearly explains the steps: installing the plugin, removing a conflicting package, and cleaning up your Prettier configuration file. Following these steps will save you a lot of manual tidying in the long run.
After completing this, try adding a few Tailwind classes to an element in a deliberately messy order (e.g., text-xl p-4 bg-red-500 m-2). When you save the file, they should snap into a clean, predictable order.
Conclusion
In this lesson, you've taken a crucial step in setting up your development environment. You've successfully installed and configured TailwindCSS in your SvelteKit project, and you’ve even added a professional touch by enabling automatic class sorting. Your project is now fully prepared for you to start building and styling components efficiently.
Key Takeaways:
- TailwindCSS is added to a SvelteKit project by installing dependencies, creating configuration files (
tailwind.config.jsandpostcss.config.js), and telling Tailwind where to find your component files. - Global styles, including the core Tailwind directives (
@tailwind base,@tailwind components,@tailwind utilities), are typically placed in a centralapp.cssfile. - This central stylesheet is imported into the root layout (
src/routes/+layout.svelte) to apply it globally. - Using the
prettier-plugin-tailwindcssautomates class sorting, leading to cleaner and more maintainable code.
Now that our project setup and styling foundation are in place, our next lesson will be all about bringing it to life. We will dive into creating your very first Svelte 5 component, exploring its basic structure with markup, scripts, and styles.