svelte-storybook-tailwind：Svelte，TailwindCSS和Storybook的入门模板。 您可以...

[](https://app.netlify.com/sites/svelte-tailwindcss-storybook/deploys) [](https://app.fossa.io/projects/git%2Bgithub.com%2Fjerriclynsjohn%2Fsvelte-storybook-tailwind?ref=badge_shield) # A starter template for Svelte, TailwindCSS and Storybook  > Visit this website to see the outcome: [Svelte + TailwindCSS + Storybook](https://svelte-tailwindcss-storybook.netlify.com) ```bash // Quickstart npx degit jerriclynsjohn/svelte-storybook-tailwind my-svelte-project cd my-svelte-project yarn yarn dev yarn stories ``` Svelte and TailwindCSS is an awesome combination for Frontend development, but sometimes the setup seems a bit non intuitive, especially when trying to try out this awesome combination. When integrating Storybook, which is another awesome tool for UI Component development and documentation, there is no obvious place to get how it's done. This repo was made to address just that! > You can easily start your project with this template, instead of wasting time figuring out configurations for each integration. ## What do you get in this repo  1. A fully functional Svelte + TailwindCSS integration with side-by-side implementation of independent Storybook 2. Storybook with 5 essential Addons 3. Storybook populated with basic examples of Svelte + TailwindCSS ### Addons - Accessibility Addon  - Accessibility Addon - Colorblindness Emulation  - Actions Addon  - Notes Addon  - Source Addon  - Viewport Addon  ## Svelte + TailwindCSS + Storybook [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 1. Clone this repo `git clone https://github.com/jerriclynsjohn/svelte-storybook-tailwind.git` 2. Go to the directory `cd svelte-storybook-tailwind` 3. Install dependencies `yarn` 4. To develop your Svelte App: `yarn dev` 5. To develop UI components independent of your app: `yarn stories` ### Documentations 1. Svelte - [API](https://svelte.dev/docs) and [Tutorial](https://svelte.dev/tutorial/) 2. TailwindCSS - [Docs](https://tailwindcss.com/docs) and [Tutorial](https://tailwindcss.com/screencasts/) 3. Storybook - [Docs](https://storybook.js.org/docs/basics/introduction/) and [Tutorial](https://www.learnstorybook.com/intro-to-storybook/svelte/en/get-started/) ## Steps to build it all by yourself and some tips [Warning: It's lengthy] ### Instantiate Svelte App - Start the template file using `npx degit sveltejs/template svelte-storybook-tailwind` - Go to the directory `cd svelte-storybook-tailwind` - Install dependencies `yarn` - Try run the svelte app `yarn dev` ### Add Tailwind into the project - Install dependencies: `yarn add -D tailwindcss @fullhuman/postcss-purgecss autoprefixer postcss postcss-import svelte-preprocess` - Change the rollup config as shown: ```javascript import svelte from 'rollup-plugin-svelte'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import postcss from 'rollup-plugin-postcss'; import autoPreprocess from 'svelte-preprocess'; const production = !process.env.ROLLUP_WATCH; export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/bundle.js', }, plugins: [ svelte({ preprocess: autoPreprocess({ postcss: true, }), // enable run-time checks when not in production dev: !production, // we'll extract any component CSS out into // a separate file — better for performance css: css => { css.write('public/bundle.css'); }, }), postcss({ extract: 'public/utils.css', }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration — // consult the documentation for details: // https://github.com/rollup/rollup-plugin-commonjs resolve({ browser: true, dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/'), }), commonjs(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), ], watch: { clearScreen: false, }, }; ``` - Add tailwind config using the command `npx tailwind init` - Add PostCSS config `./postcss.config.js` as follows: ```javascript const production = !process.env.ROLLUP_WATCH; const purgecss = require('@fullhuman/postcss-purgecss'); module.exports = { plugins: [ require('postcss-import')(), require('tailwindcss'), require('autoprefixer'), production && purgecss({ content: ['./**/*.html', './**/*.svelte'], defaultExtractor: content => { const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g); const matchedTokens = []; let match = regExp.exec(content); // To make sure that you do not lose any tailwind classes used in class directive. // https://github.com/tailwindcss/discuss/issues/254#issuecomment-517918397 while (match) { if (match[0].startsWith('class:')) { matchedTokens.push(match[0].substring(6)); } else { matchedTokens.push(match[0]); } match = regExp.exec(content); } return matchedTokens; }, }), ], }; ``` - Build the project with some TailwindCSS utilities `yarn dev` ### Add Storybook into the Svelte Project - Add Storybook dependencies `yarn add -D @storybook/svelte` - Add 5 commonly used Storybook [Addons](https://storybook.js.org/addons/): - [Source](https://github.com/storybookjs/storybook/tree/master/addons/storysource): `yarn add -D @storybook/addon-storysource` - [Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions): `yarn add -D @storybook/addon-actions` - [Notes](https://github.com/storybookjs/storybook/tree/master/addons/notes): `yarn add -D @storybook/addon-notes` - [Viewport](https://github.com/storybookjs/storybook/tree/master/addons/viewport): `yarn add -D @storybook/addon-viewport` - [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y):