Setting up Astro with Svelte + Tailwind + DaisyUI + TypeScript anno May 2024

Astro VS Svelte…? …Astro AND Svelte…!

This post will take you through the setup of a new Astro project using Svelte, Tailwind, DaisyUI and TypeScript.

These tools are common enough that they don’t need introduction. If you want more information about them check their official webpage.

• Astro: https://astro.build
• Svelte: https://svelte.dev
• TailwindCSS: https://tailwindcss.com
• DaisyUI: https://daisyui.com/
• TypeScript: https://www.typescriptlang.org

Difficulty: 1/5 — Truly the astro ecosystem feels very mature. Setting up a new project (or upgrading an older one) is really a breeze.

As with most of my blogposts, the focus will be on understanding the process rather than racing through commands to get a working setup. If you want a working setup out of the box, please refer to the AstroSvelteDaisyUI starter.

Since this tutorial is about a modern setup, we’re embracing ESM on the NodeJS side aswell. This means that all importing and exporting will be done with the ESM syntax and the CommonJS syntax will not be used.

Without further ado lets dive into it.

Step 0: Pre setup

Ofcoures for modern projects we’re using a package manager. Throughout this tutorial we’ll be using npm (still the most comon/populair choice) but feel free to use a package manager of your liking.

First things first, generate a package.json file that will keep track of our dependencies.

npm init

Step 1: The astro base project

The first thing to do is setup an Astro base project. Their startup guide provides clear instructions on how to do this.

Essentially they’ve made it as easy as running:

npm create astro@latest

The astro wizard will ask a bunch of questions related to the initial setup. The below demonstrates the answers I’d recommend.

  dir    Where should we create your new project?
         ./astro-starter

  tmpl   How would you like to start your new project?
         Include sample files

  ts     Do you plan to write TypeScript?
         Yes

  use    How strict should TypeScript be?
         Strictest

  deps   Install dependencies? (recommended)
         Yes

  git    Initialize a new git repository? (optional)
         Yes

To break it down just a little bit:

tmpl: Including sample files can help you remembering syntax if needed, if you don’t need them, you can always delete them straight away.

This will generate src/layouts and src/components with an example on how to use them for astro pages.

ts: Including TypeScript is part of the setup for today.

This will add the TypeScript dependency to package.json under-the-hood.

use: The strictest TypeScript settings will provide you with the least amount of freedom, hence forcing more consistent code writing experience.

This generates the following file under-the-hood

// tsconfig.json
{
  "extends": "astro/tsconfigs/strictest"
  // When using `normal` TypeScript
  "extends": "astro/tsconfigs/base"
}

deps: Might aswell install them directly.

This will run npm install as part of the astro setup process.

git: Any project anno 2024 should use a proper form of version management. Git is by far the most popular, therefore opt-in to using it.

Under the hood

A couple of files are auto-generated that are important to us:

• astro.config.mjs: This will contain any astro related configuration
• package.json: This contains the dependencies of the project
• tsconfig.json: This contains the TypeScript configuration

Upgrading existing project

Updating an existing project therefore is as simple as updating the dependencies that were added by Astro.

npm i astro@latest @astrojs/check@latest typescript@latest

Step 2: Adding Svelte to the astro project

Astro supports compiling components from any framework. For now we’ll only add Svelte support to our Astro world.

Astro has made this process as simple as possible by offering 1 command that does all this:

npx astro add svelte

Svelte/TypeScript support comes for free with this integration, and thus nothing has to be done.

NOTE: for Svelte Components to do anything dynamic e.g. execute JavaScript, Astro needs to be made aware that the component requires ClientSide JavaScript. This can be done by adding a client:* directive to the component.

<Layout title="Welcome to Astro.">
  <MySvelteComponent client:load />
</Layout>

More on this in the astro docs.

Under the hood

Adding svelte using the magic command simply installs a couple of dependencies and adds a line in the config that indicates that the new dependency has to be actually used.

Which boils down to running:

npm install @astrojs/svelte svelte

And modify astro.config.mjs to use the svelte integration

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});

Upgrading existing project

To upgrade an existing Svelte integration in an Astro project is therefore as simple as making sure that the astro.config.js file is in the correct format and updating the dependencies to the latest version:

npm i @astrojs/svelte@latest svelte@latest

Step 3: Adding TailwindCSS to the project

The astro docs do a good job of explaining how to achieve this. Essentially this can be done with a single command:

npx astro add tailwind

Under the hood

This will install the following dependencies

npm install @astrojs/tailwind tailwindcss

Will create a basic tailwind.config.mjs

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

Adds the tailwind dependency to the astro.config.mjs

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  // ...
  integrations: [svelte(), tailwind()]
});

NOTE: Nothing else is needed by default. Older versions (astrojs/tailwind < v4) required a global.css . This isn’t needed anymore.

required a global.css that included

Upgrading existing project

Simply update the dependencies to their latest version:

npm install @astrojs/tailwind@latest tailwindcss@latest

Additionally always make sure that the config format is still correct and supported. (Especially when migrating from a relatively old version).

Step 4: Adding DaisyUI to the project

Following to the DaisyUI docs installing the DaisyUI dependency and linking it the the tailwind.config.mjs is all that is needed.

npm i -D daisyui@latest

And updating tailwind.config.mjs to include the following:

import daisyui from "daisyui"

export default {
  //...
  plugins: [daisyui],
}

NOTE: The DaisyUI docs are using CommonJS imports and exports, which we thus do not do since we’re keeping everything in the modern ESM style.

Conclusion

To wrap up, setting this all up is as simple as:

npm init
npm create astro@latest

cd astro-starter
npx astro add svelte
npx astro add tailwind
npm i -D daisyui@latest

Add to tailwind.config.mjs

import daisyui from "daisyui"

export default {
  //...
  plugins: [daisyui],
}

After doing the above, your project setup will be up and ready. Checkout this AstroSvelteDaisyUI starter for a running example:

https://github.com/Kishanjay/Starter-Astro_Svelte_DaisyUI

👋 — Cheers and happy coding,

Kishan