Tailwind Snippets

Getting Started

Clone the repo:

git clone https://github.com/surdarmaputra/tailwind-snippets

# Install dependencies
yarn install

# Preparet Git hook
npx lefthook install

# Test lefthook
npx lefthook run pre-commit

Run the development server:

# Run the app server
yarn dev

# Run the storybook server
yarn storybook

Open http://localhost:3000 to see the result.

Open http://localhost:6006 to explore the storybook.

The page and storybook auto-update as you edit the file.

Project Convention

• There's a pre-configured color palette that includes primary, success, danger, warning and dark colors (configured in tailwind.config.js). To reduce complexity in the app, it's recommended to use these colors instead of all colors provided by tailwind.
• Components are grouped using the atomic-design principle.
• Commit and PR titles use the conventional commit format.

References

• Next.js documentation - learn about Next.js features and API.
• Next.js deployment documentation - how to deploy Next.js.
• Deploy to Vercel - create a new deployment on Vercel.
• Install icon set - install desired icon set using unplugin-icons.
• Icons browser - browse available icons.