Created
April 12, 2022 19:50
-
-
Save rachids/81ad6075f99a76acb37a9f781fbd3ee3 to your computer and use it in GitHub Desktop.
Make Storybook works with Laravel Jetstream, Inertia and TailwindCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require('path'); | |
| const tailwindcss = require('../tailwind.config'); | |
| module.exports = { | |
| "stories": [ | |
| "../stories/**/*.stories.mdx", | |
| "../stories/**/*.stories.@(js|jsx|ts|tsx)" | |
| ], | |
| "addons": [ | |
| "@storybook/addon-links", | |
| "@storybook/addon-essentials" | |
| ], | |
| "framework": "@storybook/vue3", | |
| "core": { | |
| "builder": "webpack5", | |
| }, | |
| "webpackFinal": async (config) => { | |
| config.module.rules.push({ | |
| test: /\.css$/, | |
| use: [ | |
| { | |
| loader: 'postcss-loader', | |
| options: { | |
| postcssOptions: { | |
| implementation: 'postcss', | |
| plugins: { | |
| tailwindcss, | |
| } | |
| }, | |
| }, | |
| }, | |
| ], | |
| include: path.resolve(__dirname, '../'), | |
| }); | |
| config.resolve = { | |
| ...config.resolve, | |
| alias: { | |
| ...config.resolve?.alias, | |
| '@': '../resources/js', | |
| } | |
| } | |
| return config; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import '../resources/css/app.css'; | |
| export const parameters = { | |
| actions: { argTypesRegex: "^on[A-Z].*" }, | |
| controls: { | |
| matchers: { | |
| color: /(background|color)$/i, | |
| date: /Date$/, | |
| }, | |
| }, | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment