Step by step: How to setup Storybook with Next.js and Tailwind CSS

• storybook

  321 82,727 10.0 TypeScript

  Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  

// .storybook/main.js const path = require('path'); module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], staticDirs: ['../public'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', { /** * NOTE: fix Storybook issue with PostCSS@8 * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 */ name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: require('postcss'), }, }, }, ], core: { builder: 'webpack5', }, webpackFinal: (config) => { /** * Add support for alias-imports * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391 */ config.resolve.alias = { ...config.resolve?.alias, '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')], }; /** * Fixes font import with / * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160 */ config.resolve.roots = [ path.resolve(__dirname, '../public'), 'node_modules', ]; return config; }, };

• ts-nextjs-tailwind-starter

  5 2,644 7.7 TypeScript

  🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features

Check out the ts-nextjs-tailwind-starter!

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project