Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jerriclynsjohn/svelte-storybook-tailwind
A starter template for Svelte, TailwindCSS and Storybook. You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.
https://github.com/jerriclynsjohn/svelte-storybook-tailwind
hacktoberfest storybook svelte sveltejs tailwind tailwindcss
Last synced: 3 days ago
JSON representation
A starter template for Svelte, TailwindCSS and Storybook. You can easily start your project with this template, instead of wasting time figuring out configurations for each integration.
- Host: GitHub
- URL: https://github.com/jerriclynsjohn/svelte-storybook-tailwind
- Owner: jerriclynsjohn
- Created: 2019-08-30T10:43:45.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-12-17T03:23:08.000Z (about 1 month ago)
- Last Synced: 2025-01-12T14:04:16.735Z (10 days ago)
- Topics: hacktoberfest, storybook, svelte, sveltejs, tailwind, tailwindcss
- Language: Svelte
- Homepage: https://sst.sveltehub.dev
- Size: 5.3 MB
- Stars: 318
- Watchers: 3
- Forks: 48
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Svelte 4.2 + Storybook 8 + TailwindCSS 3
Visit the website to see the outcome: [Svelte + Storybook + TailwindCSS](https://sst.sveltehub.dev)
```bash
// Quickstart
npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project
cd my-svelte-project
pnpm install
pnpm run dev
pnpm 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](https://storybook.js.org/) is an open source tool for developing JavaScript UI components in isolation
[Svelte](https://svelte.dev/) is a component framework that allows you to write highly-efficient, imperative code, that surgically updates the DOM to maintain performance.
[TailwindCSS](https://tailwindcss.com/) 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.
## Steps to build
#### Instantiate Svelte + Vite app
- Initiate the project using `pnpm create vite@latest`
- Select Svelte + Javascript from the CLI
- You have a basic Svelte + Vite app ready
#### Add Tailwind to the project
- Install dependencies `pnpm install -D tailwindcss postcss autoprefixer`
- Instantiate the tailwind and postcss config files using `npx tailwindcss init -p`
- Update the tailwind config as shown below to accomodate for Svelte components
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{svelte,js,ts}'],
theme: {
extend: {}
},
plugins: []
};
``;
```
- Add Tailwind directive to your CSS at `./src/app.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Import CSS into `./src/main.ts`
```ts
import './app.css';
import App from './App.svelte';
const app = new App({
target: document.getElementById('app')
});
export default app;
```
- With this we have tailwind setup in the project
#### Add storybook and native story format into the project
- Instantiate by running `pnpm dlx storybook@latest init`
- Hook up TailwindCSS by importing the CSS into `./.storybook/preview.ts`
```ts
import type { Preview } from '@storybook/svelte';
import '../src/app.css';
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
}
}
};
export default preview;
```
- This completes the setup required for the project
### Best Practices for UI Component Library
- Watchout for this space for more, will be updatin with some good best practises till then do feel free to explore the example UI components used for this website.