Nextjs-TailwindCSS-Storybook-TypeScript前端架构模板

nextjs 的项目起点里,nextjs-tailwindcss-storybook-typescript算是挺顺手的一个。带TypeScript,集成了TailwindCSSStorybook,开箱即用,适合想快速搭好前端架构的你。

Tailwind 在storybook里是单独构建的,用了tailwind-storybook脚本,路径、输出都设置好了,基本不用你操心。想改的话,直接看看package.json里的命令就行。

项目结构比较干净,不花哨,写组件、调样式都挺顺。tailwind.css放在./styles,Storybook 专用样式会被构建到./public/storybook,结构清晰,调试也方便。

我觉得这个模板比较适合那些已经用过一轮 Next 的人。比如你现在想拉个中大型项目,又不想从零搭,那这个可以省不少配置时间。

注意一点,如果你 Storybook 里还想引其他自定义插件,最好提前看下它的 Webpack 配置,虽然不复杂,但动起来还是得小心点。

如果你是想做组件库的开发,又想保持样式一致,Storybook + Tailwind 的搭配真的香,调起来也快,展示也统一。

zip
nextjs-tailwindcss-storybook-typescript-main.zip 预估大小:22个文件
folder
nextjs-tailwindcss-storybook-typescript-main 文件夹
folder
.storybook 文件夹
file
preview.js 74B
file
preview-head.html 151B
file
main.js 249B
file
package.json 1KB
file
package-lock.json 642KB
folder
pages 文件夹
file
_app.tsx 207B
file
index.tsx 906B
file
tsconfig.json 505B
file
next-env.d.ts 75B
file
.gitignore 466B
folder
components 文件夹
file
Button.tsx 929B
file
Github.stories.tsx 344B
file
Logo.tsx 602B
file
Button.stories.tsx 468B
file
Github.tsx 2KB
file
tailwind.config.js 149B
folder
styles 文件夹
file
tailwind.css 59B
folder
public 文件夹
file
vercel.svg 1KB
file
favicon.ico 15KB
folder
storybook 文件夹
file
tailwind.storybook.css 3.74MB
file
README.md 2KB
file
postcss.config.js 135B
zip 文件大小:489.43KB