# README

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Adding DaisyUI (and TailwindCSS)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

Modify tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/routes/**/*.{svelte,js,ts}'],
  theme: { // in one example theme is not present, in another it is
    extend: {},
  },
  plugins: [require('daisyui')],
};

Create two files app.css and +layout.svelte, respectively:

$ tree
.
├── app.css
├── app.d.ts
├── app.html
└── routes
    ├── +layout.svelte
    └── +page.svelte

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

<script>
  import '../app.css';
</script>

<slot />

Now finally install daisyui (the site won't be available until this is done):

npm i daisyui

Now it's done! Add stuff to +page.svelte to start using the classes.

Two switch themes modify app.html:

- <html lang="en">
+ <html lang="en" data-theme="cupcake">