Create a nextjs project.
Using Javascript you can use:
npx create-next-app@latest
# or
yarn create next-app
Using Typescript you can use:
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
I'll use this options
Install Tailwind CSS with Next.js
Install Tailwind CSS with Next.js - Tailwind CSS
Setting up Tailwind CSS in a Next.js v10+ project.
tailwindcss.com
Trying TailwindCSS and adding a script
I'll try Tailwind CSS modifying the file pages/index.tsx
export default function Home() {
return (
<>
<h1 className='text-red-900 text-9xl'>hola</h1>
</>
)
}
Now let's add the following script in the package.json file
"scripts": {
"watch:css": "npx tailwindcss -i ./styles/globals.css -o ./public/tailwind.css --watch"
}
This script will create file with only the clases that we used in our project. Also it will watch pending for new changes in the classes of our project.
Let's run the script
yarn watch:css
File added by the script
Classes used in our project are in that file
Installing and trying storybook
Before to install storybook we need to rename the .eslintrc.json to .eslintrc to avoid conflict with migrating when storybook is installing.
Now, let's install storybook
npx sb init
Storybook installed
Now try storybook running the script
yarn storybook
If show an error in the file tsconfig.json close and open vscode
Configuring storybook with tailwind
Open the file .storybook/preview.js and import the file created by the tailwindcss script
It should looks like this
import('../public/tailwind.css')
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
}
Now must to tell tailwind to compile the files in the folder stories
Open the file tailwind.config.js and add the path './stories/*.{js,ts,jsx,tsx}'
It should looks like this
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./stories/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {}
},
plugins: []
}
Adding a storybook script
"scripts": {
"watch:storybook": "start-storybook dev -p 6006"
},
Now let's run both script
yarn watch:css
Now, open another terminal and run
yarn watch:storybook
Creating a component and a story
Let's create a component in the path ./stories/AnotherButton.tsx
interface Props {}
export function AnotherButton(props: Props) {
return (
<>
<button className='p-8 text-lg text-white rounded-3xl bg-slate-700'>
AnotherButton
</button>
</>
)
}
Let's create a story for that component in ./stories/AnotherButton.stories.tsx
import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { AnotherButton } from './AnotherButton'
export default {
title: 'tailwind/AnotherButton',
component: AnotherButton
} as ComponentMeta<typeof AnotherButton>
const Template: ComponentStory<typeof AnotherButton> = (args) => (
<AnotherButton {...args} />
)
export const Primary = Template.bind({})
Top comments (1)
Great article.
The combination of Nextjs, TailwindCSS and Storybook is truly impressive.. and TypeScript as well..