├── .gitignore
├── .storybook
    ├── main.js
    ├── preview-head.html
    └── preview.js
├── README.md
├── components
    ├── Button.stories.tsx
    ├── Button.tsx
    ├── Github.stories.tsx
    ├── Github.tsx
    └── Logo.tsx
├── next-env.d.ts
├── package-lock.json
├── package.json
├── pages
    ├── _app.tsx
    └── index.tsx
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── storybook
    │   └── tailwind.storybook.css
    └── vercel.svg
├── styles
    └── tailwind.css
├── tailwind.config.js
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 
36 | # storybook build
37 | /storybook-static
38 | # generated on build
39 | tailwind.storybook.css


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
 3 |   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 4 |   features: {
 5 |     postcss: false,
 6 |   },
 7 |   // webpackFinal is modified by nextjs/storybook-plugin to include node-modules and nextjs/babel
 8 |   typescript: {
 9 |     reactDocgen: 'react-docgen',
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 | <!-- We add tailwind to the head to avoid using storybook postcss configuration -->
2 | <link rel="stylesheet" href="/storybook/tailwind.storybook.css" />
3 | 


--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | export const parameters = {
2 |   actions: { argTypesRegex: "^on[A-Z].*" },
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## nextjs-tailwindcss-storybook-typescript
 2 | 
 3 | This package aims to be a flexible starting point if you want to use Nextjs, TailwindCSS, Storybook and TypeScript.
 4 | 
 5 | ### TailwindCSS
 6 | 
 7 | Instead of using Storybook's own webpack, this repo uses nextjs build pipeline and then includes the generated CSS independently in Storybook.
 8 | The only caveat is that you have to place the generated CSS somewhere that can be accessed by storybook webserver.
 9 | 
10 | Please review `package.json` and make changes according to your needs
11 | 
12 | ```json
13 | "tailwind-storybook": "tailwind build ./styles/tailwind.css -o ./public/storybook/tailwind.storybook.css",
14 | "tailwind-storybook-build": "NODE_ENV=production tailwind build ./styles/tailwind.css -o ./storybook-static/storybook/tailwind.storybook.css",
15 | "storybook": "npm run tailwind-storybook && start-storybook -s ./public -p 6006",
16 | "build-storybook": "build-storybook && tailwind-storybook-build"
17 | ```
18 | 
19 | ## NextJS default Readme...
20 | 
21 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
22 | 
23 | ## Getting Started
24 | 
25 | First, run the development server:
26 | 
27 | ```bash
28 | npm run dev
29 | # or
30 | yarn dev
31 | ```
32 | 
33 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
34 | 
35 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
36 | 
37 | ## Learn More
38 | 
39 | To learn more about Next.js, take a look at the following resources:
40 | 
41 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
42 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
43 | 
44 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
45 | 
46 | ## Deploy on Vercel
47 | 
48 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
49 | 
50 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
51 | 


--------------------------------------------------------------------------------
/components/Button.stories.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from './Button'
 2 | 
 3 | import type { ButtonProps } from './Button'
 4 | import type { Story, Meta } from '@storybook/react/types-6-0'
 5 | 
 6 | export default {
 7 |   title: 'Brand/Button',
 8 |   component: Button,
 9 | } as Meta
10 | 
11 | const Template: Story<ButtonProps> = (args) => <Button {...args}>Default Button</Button>
12 | 
13 | export const Primary: Story<ButtonProps> = Template.bind({})
14 | 
15 | export const Variant: Story<ButtonProps> = Template.bind({})
16 | 
17 | Variant.args = {
18 |   isVariant: true,
19 | }
20 | 


--------------------------------------------------------------------------------
/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import type { HTMLAttributes } from 'react'
 2 | import cn from 'classnames'
 3 | 
 4 | export interface ButtonProps extends HTMLAttributes<HTMLDivElement> {
 5 |   isVariant?: boolean
 6 | }
 7 | 
 8 | export const Button: React.FC<ButtonProps> = ({ children, isVariant, ...rest }) => {
 9 |   return (
10 |     <div className={`inline-flex ${!isVariant ? 'rounded-md shadow' : ''}`} {...rest}>
11 |       <button
12 |         type='button'
13 |         className={cn({
14 |           'inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md focus:outline-none focus:shadow-outline transition duration-150 ease-in-out': true,
15 |           'text-white bg-indigo-600 hover:bg-indigo-500': !isVariant,
16 |           'text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:border-indigo-300': isVariant,
17 |         })}>
18 |         {children}
19 |       </button>
20 |     </div>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/components/Github.stories.tsx:
--------------------------------------------------------------------------------
 1 | import { Github } from './Github'
 2 | import type { GithubProps } from './Github'
 3 | import type { Story, Meta } from '@storybook/react/types-6-0'
 4 | 
 5 | export default {
 6 |   title: 'Misc/Github',
 7 |   component: Github,
 8 | } as Meta
 9 | 
10 | const Template: Story<GithubProps> = (args) => <Github {...args} />
11 | 
12 | export const Primary: Story<GithubProps> = Template.bind({})
13 | 


--------------------------------------------------------------------------------
/components/Github.tsx:
--------------------------------------------------------------------------------
 1 | import type { AnchorHTMLAttributes } from 'react'
 2 | 
 3 | export interface GithubProps extends AnchorHTMLAttributes<HTMLAnchorElement> {}
 4 | 
 5 | // https://tholman.com/github-corners/
 6 | export const Github: React.FC<GithubProps> = (props) => {
 7 |   return (
 8 |     <a
 9 |       {...props}
10 |       href='https://github.com/dazuaz/nextjs-tailwindcss-storybook-typescript'
11 |       className='github-corner'
12 |       aria-label='View source on GitHub'>
13 |       <style jsx>{`
14 |         .github-corner:hover .octo-arm {
15 |           animation: octocat-wave 560ms ease-in-out;
16 |         }
17 |         @keyframes octocat-wave {
18 |           0%,
19 |           100% {
20 |             transform: rotate(0);
21 |           }
22 |           20%,
23 |           60% {
24 |             transform: rotate(-25deg);
25 |           }
26 |           40%,
27 |           80% {
28 |             transform: rotate(10deg);
29 |           }
30 |         }
31 |         @media (max-width: 500px) {
32 |           .github-corner:hover .octo-arm {
33 |             animation: none;
34 |           }
35 |           .github-corner .octo-arm {
36 |             animation: octocat-wave 560ms ease-in-out;
37 |           }
38 |         }
39 |       `}</style>
40 |       <svg
41 |         width={80}
42 |         height={80}
43 |         viewBox='0 0 250 250'
44 |         style={{ fill: '#151513', color: '#fff', position: 'absolute', top: 0, border: 0, right: 0 }}
45 |         aria-hidden='true'>
46 |         <path d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z' />
47 |         <path
48 |           d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2'
49 |           fill='currentColor'
50 |           style={{ transformOrigin: '130px 106px' }}
51 |           className='octo-arm'
52 |         />
53 |         <path
54 |           d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z'
55 |           fill='currentColor'
56 |           className='octo-body'
57 |         />
58 |       </svg>
59 |     </a>
60 |   )
61 | }
62 | 


--------------------------------------------------------------------------------
/components/Logo.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import type { LinkProps } from 'next/link'
 3 | 
 4 | import cn from 'classnames'
 5 | import Image from 'next/image'
 6 | 
 7 | export interface LogoProps extends LinkProps {
 8 |   itHovers: boolean
 9 | }
10 | 
11 | export const Logo: React.FC<LogoProps> = ({ itHovers = false, ...rest }) => {
12 |   return (
13 |     <Link {...rest}>
14 |       <a
15 |         className={cn({
16 |           'w-auto h-full transition-transform duration-300 ease-in-out transform': true,
17 |           'hover:scale-105': itHovers,
18 |         })}>
19 |         <Image src='/vercel.svg' alt='Vercel Logo' width='283' height='64' />
20 |       </a>
21 |     </Link>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | /// <reference types="next/image-types/global" />
4 | 
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/basic-features/typescript for more information.
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-tailwindcss-typescript-storybook",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "tailwind-storybook": "postcss ./styles/tailwind.css -o ./public/storybook/tailwind.storybook.css",
10 |     "tailwind-storybook-build": "NODE_ENV=production postcss ./styles/tailwind.css -o ./storybook-static/storybook/tailwind.storybook.css",
11 |     "storybook": "npm run tailwind-storybook && start-storybook -s ./public -p 6006",
12 |     "build-storybook": "build-storybook && npm run tailwind-storybook-build"
13 |   },
14 |   "dependencies": {
15 |     "next": "^12.0.4",
16 |     "react": "^17.0.2",
17 |     "react-dom": "^17.0.2"
18 |   },
19 |   "devDependencies": {
20 |     "@next/plugin-storybook": "^12.0.4",
21 |     "@storybook/addon-actions": "^6.2.9",
22 |     "@storybook/addon-essentials": "^6.2.9",
23 |     "@storybook/addon-links": "^6.2.9",
24 |     "@storybook/react": "^6.2.9",
25 |     "@types/react": "^17.0.11",
26 |     "autoprefixer": "^10.2.6",
27 |     "classnames": "^2.3.1",
28 |     "postcss": "^8.3.5",
29 |     "postcss-cli": "^9.0.2",
30 |     "react-is": "^17.0.2",
31 |     "tailwindcss": "^2.2.0",
32 |     "typescript": "^4.3.4"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import "../styles/tailwind.css"
2 | import type { AppProps /*, AppContext */ } from "next/app"
3 | 
4 | function MyApp({ Component, pageProps }: AppProps) {
5 |   return <Component {...pageProps} />
6 | }
7 | 
8 | export default MyApp
9 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Logo } from "components/Logo"
 2 | import { Button } from "components/Button"
 3 | import { Github } from "components/Github"
 4 | 
 5 | export default function Home() {
 6 |   return (
 7 |     <div className='bg-white'>
 8 |       <Github target='_blank' />
 9 |       <div className='max-w-screen-xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8'>
10 |         <div className='flex justify-center'>
11 |           <Logo itHovers href='/' />
12 |         </div>
13 |         <div className='h-10'></div>
14 |         <h2 className='text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10'>
15 |           Ready to dive in?
16 |           <br />
17 |           Start building something amazing.
18 |         </h2>
19 |         <div className='mt-8 flex justify-center'>
20 |           <Button>Get started</Button>
21 |           <Button isVariant className='ml-3'>
22 |             Learn more
23 |           </Button>
24 |         </div>
25 |       </div>
26 |     </div>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     // this formats supports both next and storybook
4 |     tailwindcss: {},
5 |     autoprefixer: {},
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dazuaz/nextjs-tailwindcss-storybook-typescript/52bc85622d4701ab147f7799c73130142fbdc863/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   purge: ["./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   variants: {},
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve",
20 |     "baseUrl": ".",
21 |     "incremental": true
22 |   },
23 |   "include": [
24 |     "next-env.d.ts",
25 |     "**/*.ts",
26 |     "**/*.tsx"
27 |   ],
28 |   "exclude": [
29 |     "node_modules"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------