Svelte + Vite

npm create vite@latest
√ Project name: ... test
√ Select a framework: » Svelte
√ Select a variant: » JavaScript

 

npm install --save svelte-routing

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.cjs
Created PostCSS config file: postcss.config.cjs

tailwind.config.cjs

export default {
  plugins: [],
    theme: {
    extend: {},
  },
  content: ["./index.html",'./src/**/*.{svelte,js,ts}'], // for unused CSS
  variants: {
    extend: {},
  },
  darkMode: false, // or 'media' or 'class'
}

postcss.config.cjs

import tailwind from 'tailwindcss'
import tailwindConfig from './tailwind.config.cjs'
import autoprefixer from 'autoprefixer'

export default {
  plugins:[tailwind(tailwindConfig),autoprefixer]
}

vite.config.js

import postcss from './postcss.config.cjs';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  css:{
    postcss
  }
})

app.css

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

main.js

import './app.css'

 

기타

npm install sveltestrap
npm install chart.js
npm install @popperjs/core

npm i -D flowbite flowbite-svelte classnames @popperjs/core

export default {
  plugins: [
    //require('flowbite/plugin')
  ],
  theme: {
    extend: {},
  },
  content: [
    './src/**/*.{html,svelte,js,ts}',
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
  ], // for unused CSS
  variants: {
    extend: {},
  },
  darkMode: 'class', // 'false' or 'media' or 'class'
}