DEV Community

loading...
Cover image for A nextjs template with typescript, tailwindcss and storybook support 🏗

A nextjs template with typescript, tailwindcss and storybook support 🏗

raphaelmansuy profile image Raphael MANSUY Updated on ・3 min read

The configuration of NextJS, TailwindCSS and Storybook can be complex 🏗 .

I have created a starter template to begin your journey with NextJS, typescript, tailwindcss and Jest 🎉 🦄

This project was bootstrapped with npx create-next-app and I have added support for:

Typescript
Taillwindcss
Storybook
Jest
Import SVG as React Component (SVGR) (Thanks to @neoziro)

You are welcome to contribute to this project to make it better. Contact me at contact@elitizon.com

This template is available at:

https://github.com/elitizon/nextjs-tailwind-storybook

To use this template:

  • clone it
  • remove the .git folder
  • git init .
  • git add .
  • git commit -m "First commit"

Add a star 🌟 on the project if you like it 🙏

Install all the dependencies

👉 yarn install

Available Scripts

In the project directory, you can run:

👉 yarn dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

👉 yarn storybook

Runs storybook.

Open http://localhost:6006 to view it in the browser.

👉 yarn test

Launches the test runner in the interactive watch mode.\
See the section about running tests for more information.

If you get an error that contained this line:

Use this command:

brew install watchman

👉yarn build

Builds the app for production to the .next folder.\
It correctly bundles NextJS in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

👉 Result of execution

yarn run v1.22.10
$ cross-env NODE_ENV=production next build
info  - Creating an optimized production build...


   TailwindCSS

   -----------purgeEnabled=true

info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (0/2)
info  - Generating static pages (2/2)
info  - Finalizing page optimization...

Page                                                           Size     First Load JS
┌ ○ /                                                          1.55 kB        64.3 kB
├   /_app                                                      0 B            62.7 kB
├ ○ /404                                                       3.46 kB        66.2 kB
└ λ /api/hello                                                 0 B            62.7 kB
+ First Load JS shared by all                                  62.7 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.d4f570.js  13.1 kB
  ├ chunks/framework.abffcf.js                                 41.8 kB
  ├ chunks/main.1fee81.js                                      6.62 kB
  ├ chunks/pages/_app.1315ea.js                                523 B
  ├ chunks/webpack.50bee0.js                                   751 B
  └ css/ff7ad52a1259dc7bd680.css                               1.88 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)(Static)  automatically rendered as static HTML (uses no initial props)(SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

Done in 9.00s.

Enter fullscreen mode Exit fullscreen mode

See the section about deployment for more information.

👉yarn start

Starts a server with the output for the yarn build command.

yarn build must be executed before to use this command.

👉yarn export

Export the output of the yarn build command execution to the ./out directory.

yarn build must be executed before to use this command.

👉npx serve ./out

To launch a static server from the ./out directory. This command can be useful to control the outcome of yarn export.

yarn build and yarn export must be executed before using this command.

Learn More

You can learn more in the NextJS documentation.

To learn React, check out the React documentation.

To learn how to develop UIs with component and design systems with Storybook, check out the Learn Storybook documentation

Created with ❤️ by Raphael

Discussion (9)

pic
Editor guide
Collapse
bhatvikrant profile image
Vikrant Bhat

Hey! This is a great template!
How did you purge css for this?

Collapse
raphaelmansuy profile image
Raphael MANSUY Author

Hi Vikrant.

I use PostCSS.

This is defined in the file tailwind.config.js. CSS is purged only for production.

const purgeEnabled = process.env.NODE_ENV === "production"

console.log("\n")
console.log(`   TailwindCSS \n`)
console.log(`   ----------- \n`)
console.log(`   ✅ purgeEnabled=${purgeEnabled}\n`)

module.exports = {
  purge: {
    enabled: purgeEnabled,
    content: ["./src/**/*.html", "./src/**/*.tsx", "./src/**/*.jsx"]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}
Enter fullscreen mode Exit fullscreen mode
Collapse
bhatvikrant profile image
Vikrant Bhat

I see, actually I am using bootstrap in my own project, do you by any chance have an idea how the same can be done with bootstrap?

Hehe, I'm just getting my hands dirty with Nextjs! It's amazing.

Thread Thread
raphaelmansuy profile image
Raphael MANSUY Author

For Boostrap the best option is to use PurgeCSS npmjs.com/package/purgecss

Thread Thread
raphaelmansuy profile image
Thread Thread
bhatvikrant profile image
Vikrant Bhat

Got it! Thankyou so much. Really appreciate the help 😇

Thread Thread
raphaelmansuy profile image
Raphael MANSUY Author

Your are welcome

Collapse
raphaelmansuy profile image
Raphael MANSUY Author • Edited

The cover picture is from Hong Kong 🇭🇰 It's located in the Old Central Police Station in Central

en.wikipedia.org/wiki/Central_Poli...

Collapse
raphaelmansuy profile image
Raphael MANSUY Author

Add a star 🌟 on the project if you like it 🙏