Visit the website to see the outcome: Svelte + Storybook + TailwindCSS
// Quickstart
npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project
cd my-svelte-project
npm install
npm run dev
npm run storybook
This has improved a lot since I started this repo, but I feel that there is still a need to just clone the repo and kickstart the project, so here I am again updating this and I'll keep this repo updated. I also feel that there is a need for a repo which shows some best practices.
You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.
Storybook is an open source tool for developing JavaScript UI components in isolation
Svelte is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance.
TailwindCSS 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.
npm create vite@latest
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{svelte,js,ts}'],
theme: {
extend: {}
},
plugins: []
};
``;
./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
./src/main.js
import './index.css';
import App from './App.svelte';
const app = new App({
target: document.getElementById('app')
});
export default app;
npx storybook@next init
./.storybook/preview.js
import '../src/index.css';
export const parameters = {
backgrounds: {
default: 'light'
},
actions: {argTypesRegex: '^on[A-Z].*'},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
};