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: about 1 month 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
- License: mit
- Created: 2019-08-30T10:43:45.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-08T00:19:40.000Z (12 months ago)
- Last Synced: 2024-02-05T04:45:45.199Z (5 months ago)
- Topics: hacktoberfest, storybook, svelte, sveltejs, tailwind, tailwindcss
- Language: Svelte
- Homepage: https://sst.sveltehub.dev
- Size: 5.47 MB
- Stars: 306
- Watchers: 3
- Forks: 48
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-svelte-resources - jerriclynsjohn/svelte-storybook-tailwind - (templates / editor tools)
- awesome-stars - svelte-storybook-tailwind
README
# Svelte 3.5 + Storybook 7 + 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
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](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 `npm create vite@latest`
- Select Svelte + Javascript from the CLI
- You have a basic Svelte + Vite app ready
#### Add Tailwind to the project
- Install dependencies `npm 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/index.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Import CSS into `./src/main.js`
```js
import './index.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 `npx storybook@next init`
- Hook up TailwindCSS by importing the CSS into `./.storybook/preview.js`
```js
import '../src/index.css';
export const parameters = {
backgrounds: {
default: 'light'
},
actions: {argTypesRegex: '^on[A-Z].*'},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
};
```
- 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.