Next Tailwind

A portofolio website with Next JS and Tailwind CSS

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

It uses the new Just-in-Time Mode for Tailwind CSS.

Preview the example live on StackBlitz:

Deploy the example using Vercel:

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).

This website follows Conventional Commits

Commit message will be checked using husky and commit lint, you can't commit if not using the proper convention below.

<type>(optional scope): <description> Example: feat(pre-event): add speakers section

Available types are:

feat → Changes about addition or removal of a feature. Ex: feat: add table on landing page, feat: remove table from landing page
fix → Bug fixing, followed by the bug. Ex: fix: illustration overflows in mobile view
docs → Update documentation (README.md)
style → Updating style, and not changing any logic in the code (reorder imports, fix whitespace, remove comments)
chore → Installing new dependencies, or bumping deps
refactor → Changes in code, same output, but different approach
ci → Update github workflows, husky
test → Update testing suite, cypress files
revert → when reverting commits
perf → Fixing something regarding performance (deriving state, using memo, callback)
vercel → Blank commit to trigger vercel deployment. Ex: vercel: trigger deployment

Labels per page Ex: feat(pre-event): add date label

*If there is no scope needed, you don't need to write it

Description must fully explain what is being done.

Add BREAKING CHANGE in the description if there is a significant change.

If there are multiple changes, then commit one by one