Appendix: Examples and Support

Because learning is a never-ending process and technology moves quickly, this final chapter aims to provide you with the resources you’ll need to continue your journey with SvelteKit. In the world of web development, it’s rare to see a project that doesn’t integrate multiple tools and technologies, so we’ll address how we can easily integrate SvelteKit with other frontend tooling. We’ll also see some official and community-based resources that are invaluable when it comes to troubleshooting, advancing our knowledge, or discovering new components. After that, we’ll wrap things up with a thank-you from the author. Let’s finish this book with the following sections:

• Integrations
• More Reading and Resources
• Wrapping up

Afterward, you’ll have all the tools and knowledge necessary to go forth and build cool SvelteKit projects.

Technical requirements

The complete code for this chapter is available on GitHub at: https://github.com/PacktPublishing/SvelteKit-Up-and-Running/tree/tailwind.

Integrations

When it comes to building modern web applications, it’s not uncommon to use a plethora of technologies. Each tool has its place, and it may be the case that a developer is more comfortable with a particular frontend framework than they are with standard CSS. This is fine, as it can speed up development so long as the tools integrate nicely with others. Fortunately for us, SvelteKit works quite well with others.

At the time of writing, Tailwind CSS has become incredibly popular. Tailwind CSS aims to reduce the amount of shipped CSS by only extracting that which is used. This is great to reduce the amount of assets delivered to clients and speed up load times. To showcase how simple it is to integrate a tool such as Tailwind CSS in our existing SvelteKit project, let’s work through it. These steps can also be found in the official Tailwind CSS documentation. It’s recommended to create a new branch in your repository before starting this process, as it will break some of our existing styles. If you’re following along with this book’s repository, these examples are available on the tailwind branch. To begin, we can install Tailwind along with a couple of other dependencies using the following commands:

npm install -D tailwindcss postcss autoprefixer

Of course, tailwindcss will include the necessary tooling to use Tailwind CSS within our project. The postcss dependency will allow us to manipulate CSS files, and autoprefixer is a postcss plugin that will automatically inject the appropriate vendor prefixes into our generated CSS. Once we have added the dependencies to our development environment, we can use the following command to initialize our Tailwind project. It will create the necessary tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

After initializing tailwindcss, we can open svelte.config.js and import the vitePreprocess module. This will enable us to process <style> tags throughout our Svelte components:

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
const config = {
    kit: {
        adapter: adapter(),
        alias: {
            db: '/src/db.js',
            img: '/src/lib/images'
        }
    },
    preprocess: vitePreprocess()
};
export default config;

Now that we have imported vitePreprocess, we can ensure that Tailwind CSS knows about the paths to our components. We can do this by updating tailwind.config.js, like so:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Noticeably, we only need to change the paths available in the content array property to point to our src/ directory and ensure that the .svelte file type is recognized, along with other standard file types.

We can then create a singular app.css file, where we can import all of Tailwind’s functionality using the @tailwind directive:

src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

If you’ve been paying attention, the next step should be straightforward. We then import src/app.css into our root layout component:

src/routes/+layout.svelte

<script>
  import '/src/reset.css';
  import '/src/app.css';
  import Nav from '$lib/Nav.svelte';
  import Notify from '$lib/Notify.svelte';
  export let data;
</script>
<div class='wrapper'>
  <div class='nav'>
    <div class='menu'>
      <Nav />
    </div>
    <div class='notifications'>
      <Notify count={data.notifications.count}/>
    </div>
  </div>
  <div class='content bg-orange-300'>
    <slot />
  </div>
  <div class='footer'>
    This is my footer
  </div>
</div>
<!-- <style> omitted for brevity -->

Of course, we’ve already imported reset.css, so there will be conflicts with the existing CSS throughout our project. Ensure your development environment is running with npm run dev. To prevent completely breaking our project, we’ve only set the background on the .content element to a light orange color provided by Tailwind CSS, but we’ll definitely notice other changes applied throughout the project. Now would be an excellent time to explore the practice of utility-first CSS if you have not yet done so.

We saw the manual way of integrating another tool such as Tailwind CSS, but we’re talking about SvelteKit, where things just work. If these steps are too much to remember, there is a simpler way. Try creating yet another branch based off of main in your project repository and use the following command to do essentially the same thing we just did. Again, if you’re following along with the book repository, this code can be found in the tailwind-add branch:

npx svelte-add@latest tailwindcss

We can follow along with the prompts, and once we’ve installed the dependencies with npm install, our project will have Tailwind CSS integrated! By using the community-maintained svelte-add project, we can quickly and easily import templates that integrate various technologies with our SvelteKit project. For instance, if you prefer to use SCSS/Sass flavors when writing CSS, you can use the scss custom adder, like so:

npx svelte-add@latest scss

As we can see, it’s not difficult to incorporate different technologies with SvelteKit. While we can incorporate these other toolchains manually, it’s also easily done with community-provided resources. Let’s take a look at more community resources to see what else is out there!

More Reading and Resources

As previously demonstrated, the community resources surrounding SvelteKit can be excellent to save us time and mental overhead, allowing us to focus on building our applications. This book would not have been possible without the community around SvelteKit. If you’re looking to expand on your SvelteKit knowledge, assist others, or create your own SvelteKit extensions, consider the various resources listed next!

SvelteKit Documentation

The documentation provided on the official SvelteKit website will likely be the best resource you’ll find for information about the framework. It’s incredibly thorough and constantly updated to reflect changes within the framework. Be sure to start here for any questions you may have about SvelteKit:

https://kit.svelte.dev

SvelteKit Tutorial

To thoroughly test your SvelteKit knowledge and learn more than this book could cover, check out the official SvelteKit tutorial:

https://learn.svelte.dev/tutorial

Svelte and SvelteKit chat

Have a question or just want to chat with others that are using SvelteKit? The official Discord server is the place to go:

https://svelte.dev/chat

Independent Creators

There are too many great writers and creators working with SvelteKit to list here, but a couple of this author’s favorites are Rodney Johnson and Josh Collinsworth. Collinsworth provides the excellent SvelteKit static blog starter template we saw in Chapter 8, and Johnson creates informative tutorial videos and articles:

• Rodney Johnson: https://rodneylab.com/
• Josh Collinsworth: https://joshcollinsworth.com/

Svelte Society

When it comes to finding Svelte and SvelteKit community resources, Svelte Society has you covered, whether you’re looking for templates, components, adders, or more. They even organize Svelte events, so if you’re looking to meet other Svelte developers in your area, you should start here:

https://sveltesociety.dev/

SvelteKit Repository

As with many open source projects, the code behind SvelteKit is freely available to view on GitHub. If you believe you’ve found a bug specific to the framework, consider searching the issues here, and if you don’t see your problem listed, contribute by submitting it! SvelteKit developers constantly accept pull requests and appreciate any help they can get:

https://github.com/sveltejs/kit

As with many open source projects, the community and documentation can make or break a project. Because of the excellent support behind SvelteKit, it’s hard to imagine a future where people don’t constantly evangelize about SvelteKit and Svelte.

Wrapping up

If you’ve made it this far, then thank you for staying with me. I hope the material and knowledge provided here can be of assistance with your SvelteKit projects. If you’ve enjoyed this book, then do share it with friends, colleagues, and acquaintances who are interested in learning a new JS framework. As this is my first book, it’s certainly been a journey for me, and I’ve learned much about the writing process. If you’re interested in finding more technical texts by me, I write at https://www.closingtags.com about web development and web-adjacent technologies. If you build something cool with SvelteKit, I’d love to hear about it. I can be reached via the contact form on my website. Thanks again, and I look forward to seeing what you build.

Summary

That’s it, you’ve finished the book! If you still have questions about the various workings of SvelteKit, look into the previously provided community resources. You’ll find everything necessary to expand your SvelteKit knowledge and see what others in the community are doing. Because SvelteKit integrates so well with many other tools, it should be a breeze to incorporate it with your existing workflows. I look forward to seeing what you build with it. Thanks again!

Resources

• Tailwind CSS: https://tailwindcss.com
• Svelte Add: https://github.com/svelte-add/svelte-add