For me, the best strategy for learning new skills is to practice. I have created this project to learn more about Tailwind CSS using my favorite framework (Angular). I have to tell you, Tailwind is amazing!
See Demo page.
- Sidebar
- Dark Theme
- Navbar
- Footer
- Auth Module
- Dashboard Module
- Standalone components
- Angular Signals
- Multi Theme
- Tests E2E
- User Module
- Guards
- Animations
| command | What it does? |
|---|---|
npm start | Starts the server in dev mode |
npm run lint | Runs ESLint on project |
npm run prettier | Runs prettier on entire src folder |
npm run prettier:verify | Runs prettier-check and throws error if fails |
npm run prettier:staged | Runs prettier on only staged (changed) files |
npm run e2e-ui | Runs playwright e2e test with UI |
| Package | What it does? | Link |
|---|---|---|
angular-svg-icon | Provides a means to inline SVG files to allow for them to be easily styled by CSS and code. | Here |
apexcharts | Modern & Interactive Open-source Charts | Here |
ng-apexcharts | Angular wrapper for ApexCharts to build interactive visualizations in Angular. | Here |
| Package | What it does? | Link |
|---|---|---|
prettier | An opinionated code formatter | Here |
prettier-plugin-tailwindcss | A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order | Here |
tailwind-scrollbar | Tailwind plugin for styling scrollbars. | Here |
tailwindcss | A utility-first CSS framework for rapidly building custom user interfaces. | Here |
This project use Hero Icons , Hero Patterns and Popsys illustrations
Check out our awesome sponsors!
The Tailwind name and logos are trademarks of Tailwind Labs Inc. The Angular name and logos are trademarks of Google.