angular-tailwind-storybook Tailwind Templates

Angular Tailwind Storybook

Angular + Tailwind + Storybook Template from Newwwton

A starter template for Angular, Tailwind, and Storybook

Visit the components in live storybook here.

Follow the steps to create components and pages

Create new Component

  1. Use this command to generate new component ng g c components/<component-name>

Create new Page

  1. Use this command to generate new page ng g c pages/<page-name>

To add SVG to DOM

  1. Put your svg icons in src/assets/svg and then npm run generate-icons.
  2. This will generate an svg folder in app and give you its bindings in typescript.
  3. Read @ngneat/svg-icon for more details.

How this template was created

  1. Create the minimal angular project using CLI ng new <project-name> --minimal, agree to add @angular/router and cd <project-name>
  2. Initialize Tailwind using ngneat npx ng add @ngneat/tailwind and enable JIT.
  3. Now initialize storybook using npx sb@next init

This project was generated with Angular CLI version 12.0.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Top categories

Loading Svelte Themes