DEV Community: Arpit Jalan

How to setup SvelteKit with Tailwind CSS

Arpit Jalan — Thu, 02 Mar 2023 08:13:21 +0000

What is SvelteKit?

SvelteKit, built on top of Svelte, is a framework for rapidly developing robust, performant web applications. You can read more about Svelte here.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Setup SvelteKit with Tailwind CSS

First, let's create a new SvelteKit project if you don't have one set up already.

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

Install the Tailwind CSS dependencies.

npm install -D tailwindcss postcss autoprefixer

Create the Tailwind CSS config files.

npx tailwindcss init tailwind.config.cjs -p

In your svelte.config.js file, import vitePreprocess to enable processing <style> blocks as PostCSS.

// svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    },
    preprocess: vitePreprocess()
};

export default config;

Add the paths to all of your template files in your tailwind.config.cjs file.

//tailwind.config.cjs

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

Create a ./src/app.css file and add the @tailwind directives for each of Tailwind’s layers.

/* app.css */

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

Create a ./src/routes/+layout.svelte file and import the newly-created app.css file.

<!-- +layout.svelte -->
<script>
    import '../app.css';
</script>

<slot />

That's it! You can now start using Tailwind CSS utility classes in your markup! 🚀

<!-- +page.svelte -->

<h1 class="text-3xl font-bold underline">Welcome to SvelteKit</h1>

Conclusion

The combination of SvelteKit & Tailwind CSS provides a powerful toolset for creating modern web applications that are both visually appealing and highly functional. Whether you're building a small personal project or a large-scale enterprise application, the SvelteKit & Tailwind integration is a great choice for optimizing your design and development workflow.

Check out the repository at GitHub to see the source code.

Introduction to Svelte

Arpit Jalan — Thu, 02 Mar 2023 08:09:39 +0000

What is Svelte?

Svelte is a modern JavaScript framework for building user interfaces that are designed to be fast, efficient, and easy to use. With Svelte, developers can create complex and interactive web applications quickly and easily.

What makes Svelte different?

It has a unique approach to building web applications. Whereas traditional frameworks like React and Ember do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

The edge Svelte has over other frameworks is that Svelte is a compiler, and therefore it doesn’t use virtual DOM.

The outcome of this approach is not only smaller application bundles and better performance, but also a developer experience that is more approachable for people that have limited experience with the modern tooling ecosystem.

Svelte sticks closely to the classic web development model of HTML, CSS, and JS, just adding a few extensions to HTML and JavaScript. It arguably has fewer concepts and tools to learn than some of the other framework options.

How does Svelte work?

Svelte, being a compiler, has the ability to extend HTML, CSS, and JavaScript by producing efficient JavaScript code without any runtime overhead. To accomplish this, Svelte expands upon vanilla web technologies in the following ways:

It extends HTML by enabling JavaScript expressions in markup and introducing directives that enable the use of conditions and loops, similar to handlebars.
It extends CSS by implementing a scoping mechanism that enables each component to define its own styles without the potential for conflicts with styles from other components.
It broadens the capabilities of JavaScript by reinterpreting certain directives within the language, resulting in true reactivity and streamlined component state management.

The Svelte compiler only intervenes in highly particular circumstances and solely within the scope of Svelte components. Changes made to the JavaScript language are kept to a minimum and chosen with great care so as not to disrupt JavaScript syntax or estrange developers. You will primarily be utilizing plain JavaScript (or optionally, TypeScript).

To try Svelte in an interactive online environment you can try the REPL.

Creating your first Svelte app

To create a project locally the recommended way is to use SvelteKit, the official application framework from the Svelte team:

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

SvelteKit will handle calling the Svelte compiler to convert your .svelte files into .js files that create the DOM and .css files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment.

A typical SvelteKit project looks like this:

myapp/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ └ hooks.server.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

You can read more about SvelteKit project structure here.

After running npm run dev, Svelte will compile and build your application. SvelteKit will start a local server at localhost:5173. It will watch for file updates and automatically recompile and refresh the app for you when changes are made to the source files.

Go ahead and play with the files generated in the myapp folder and see the changes live on your local server. If you face any difficulty or want to learn more the official docs are your friend.

Conclusion

Svelte stands out as an incredibly intuitive framework that I have grown to love more and more with each use. For beginners, I highly recommend Svelte as your first choice because of its focus on adhering to web standards. As a seasoned web developer, you will likely appreciate the simplicity of Svelte and perhaps even rediscover your passion for web development.