Svelte Tailwind Storybook Starter Template

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,    },};

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;                },            }),    ],};

const path = require('path');module.exports = ({ config, mode }) => {    config.module.rules.push({        test: /\.css$/,        loaders: [            {                loader: 'postcss-loader',                options: {                    sourceMap: true,                    config: {                        path: './.storybook/',                    },                },            },        ],        include: path.resolve(__dirname, '../storybook/'),    });    return config;};

var tailwindcss = require('tailwindcss');module.exports = {    plugins: [        require('postcss-import')(),        tailwindcss('./tailwind.config.js'),        require('autoprefixer'),    ],};

/* Import Tailwind as Global Utils */@import 'tailwindcss/base';@import 'tailwindcss/components';@import 'tailwindcss/utilities';

{    "scripts": {        // Rest of the scripts        "stories": "start-storybook",        "build-stories": "build-storybook"    }}

import { configure, addParameters, addDecorator } from '@storybook/svelte';import { withA11y } from '@storybook/addon-a11y';// automatically import all files ending in *.stories.jsconst req = require.context('../storybook/stories', true, /\.stories\.js$/);function loadStories() {    req.keys().forEach(filename => req(filename));}configure(loadStories, module);addDecorator(withA11y);addParameters({ viewport: { viewports: newViewports } });

import '@storybook/addon-storysource/register';import '@storybook/addon-actions/register';import '@storybook/addon-notes/register';import '@storybook/addon-viewport/register';import '@storybook/addon-a11y/register';

const path = require('path');module.exports = ({ config, mode }) => {    config.module.rules.push(        {            test: /\.css$/,            loaders: [                {                    loader: 'postcss-loader',                    options: {                        sourceMap: true,                        config: {                            path: './.storybook/',                        },                    },                },            ],            include: path.resolve(__dirname, '../storybook/'),        },        //This is the new block for the addon        {            test: /\.stories\.js?$/,            loaders: [require.resolve('@storybook/addon-storysource/loader')],            include: [path.resolve(__dirname, '../storybook')],            enforce: 'pre',        },    );    return config;};

<script>    export let text = '';</script><button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">    {text}</button>

import '../../css/utils.css';import { storiesOf } from '@storybook/svelte';import ButtonSimple from '../../components/buttons/button-simple.svelte';import markdownNotes from './buttons.stories.md';storiesOf('Buttons | Buttons', module)    //Traditional Alert    .add(        'Simple',        () => ({            Component: ButtonSimple,            props: { text: 'Button' },        }),        { notes: { markdown: markdownNotes } },    );