{"id":14973211,"url":"https://github.com/themesberg/tailwind-angular-starter","last_synced_at":"2025-10-26T23:30:29.692Z","repository":{"id":178903763,"uuid":"662522016","full_name":"themesberg/tailwind-angular-starter","owner":"themesberg","description":"Free and open-source starter project to help you get started with Angular, Tailwind CSS and the Flowbite UI components","archived":false,"fork":false,"pushed_at":"2024-06-27T09:48:13.000Z","size":689,"stargazers_count":20,"open_issues_count":2,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-01T00:51:07.502Z","etag":null,"topics":["angular","angular-cli","angular2","angular4","angularjs","flowbite","tailwind","tailwindcss","ui","ui-components","uikit"],"latest_commit_sha":null,"homepage":"https://flowbite.com/docs/getting-started/angular/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themesberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-05T10:07:14.000Z","updated_at":"2024-11-21T23:57:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"64d1707d-f362-4db5-958f-519f15da46f7","html_url":"https://github.com/themesberg/tailwind-angular-starter","commit_stats":null,"previous_names":["themesberg/tailwind-angular-starter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-angular-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-angular-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-angular-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Ftailwind-angular-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themesberg","download_url":"https://codeload.github.com/themesberg/tailwind-angular-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238408607,"owners_count":19467132,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-cli","angular2","angular4","angularjs","flowbite","tailwind","tailwindcss","ui","ui-components","uikit"],"created_at":"2024-09-24T13:48:23.333Z","updated_at":"2025-10-26T23:30:29.686Z","avatar_url":"https://github.com/themesberg.png","language":"HTML","funding_links":[],"categories":["Site Templates"],"sub_categories":["Free Templates"],"readme":"## Tailwind 4 Angular Starter\n\n[Follow this guide](https://flowbite.com/docs/getting-started/angular/) to learn how to set up a new Angular project with Tailwind CSS and integrate the open-source UI components from the Flowbite Library.\n\n## Create Angular project\n\nThe recommended and quickest way to get started with creating a new Angular project is by installing the official CLI tool by running the following command in your terminal:\n\n```bash\nnpm install -g @angular/cli\n```\n\nThis command will make the Angular CLI available on your local computer.\n\n1. Run the following command to create a new Angular project:\n\n```bash\nng new flowbite-app\n```\n\nYou can follow the instructions from the CLI prompts to select the options that you want to choose when creating a new project - you should select \"CSS\" when asked.\n\nThis command will create a new folder called `flowbite-app` where you have all the necessary source files to start a new local and production-ready Angular project.\n\n2. Run the `ng serve --open` command in your terminal to start a local server:\n\n```bash\nng serve --open\n```\n\nThis will create a local development server and automatically open a new tab on the `localhost:4200` port by adding the `--open` flag to the command.\n\nCongratulations! Now you have a fully working Angular project installed and configured.\n\n## Install Tailwind CSS\n\nNow that you've successfully installed and configured an Angular project we can proceed with installing the most popular utility-first CSS framework called Tailwind.\n\n1. Install Tailwind CSS and Post CSS via NPM by running the following command:\n\n```bash\nnpm install tailwindcss @tailwindcss/postcss postcss --save\n```\n\nThis command will install all the dependencies of Tailwind CSS available in your `package.json` file.\n\n2. Create a `.postcssrc.json` file in the root folder of your project and include the Tailwind PostCSS plugin:\n\n```javascript\n{\n  \"plugins\": {\n    \"@tailwindcss/postcss\": {}\n  }\n}\n```\n\n3. Import the core Tailwind directive inside the `styles.css` file:\n\n```css\n/* You can add global styles to this file, and also import other style files */\n\n@import \"tailwindcss\";\n```\n\n5. Start a local development server on Angular by running `ng serve --open`. If you already had one open then you need to restart it to allow Angular to internally set up the new configuration.\n\nCongratulations! You can now start using the utility classes from Tailwind CSS inside your Angular project.\n\n## Install Flowbite\n\nNow that you have both Angular and Tailwind CSS configured for your web application project you can proceed by installing the Flowbite Library to start leveraging the interactive UI components such as navbars, modals, cards, buttons, and more to build user interfaces faster with Tailwind CSS support.\n\n1. Install Flowbite as a dependency using NPM by running the following command:\n\n```bash\nnpm install flowbite --save\n```\n\n2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:\n\n```css\n@import \"flowbite/src/themes/default\";\n```\n\n3. Import the Flowbite plugin file in your CSS:\n\n```css\n@plugin \"flowbite/plugin\";\n```\n\n4. Configure the source files of Flowbite in your CSS:\n\n```css\n@source \"../node_modules/flowbite\";\n```\n\n5. Update the `app.component.ts` file to use the `initFlowbite` function to enable the interactive components via data attributes:\n\n```javascript\nimport { Component } from '@angular/core';\nimport { OnInit } from '@angular/core';\nimport { initFlowbite } from 'flowbite';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n  title = 'web-app';\n\n  ngOnInit(): void {\n    initFlowbite();\n  }\n}\n```\n\nThis will allow you to enable components such as the modals, navigation bars, dropdowns to dynamically set up the functionality via our data attributes interface.\n\n## Using with Angular SSR\n\nTo enable using Flowbite with SSR (Server-Side Rendering) you need to create a custom service that will handle the dynamic import of Flowbite:\n\n```javascript\n// src/app/services/flowbite.service.ts\nimport { Injectable, Inject, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class FlowbiteService {\n  constructor(@Inject(PLATFORM_ID) private platformId: any) {}\n\n  loadFlowbite(callback: (flowbite: any) =\u003e void) {\n    if (isPlatformBrowser(this.platformId)) {\n      import('flowbite').then(flowbite =\u003e {\n        callback(flowbite);\n      });\n    }\n  }\n}\n```\n\n**Important**: if you are using SSR make sure that this is the only way you're importing Flowbite in your Angular application to prevent the document object not being available on the server side.\n\nAfter that, you can use this service in your component to start using the Flowbite API and data attributes:\n\n```javascript\n// src/app/components/some-component/some-component.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { FlowbiteService } from '../../services/flowbite.service';\n\n@Component({\n  selector: 'app-some-component',\n  templateUrl: './some-component.component.html',\n  styleUrls: ['./some-component.component.css']\n})\nexport class SomeComponent implements OnInit {\n  constructor(private flowbiteService: FlowbiteService) {}\n\n  ngOnInit(): void {\n    this.flowbiteService.loadFlowbite((flowbite) =\u003e {\n      initFlowbite();\n    });\n  }\n}\n```\n\nThis will prevent the \"document is undefined\" error that happens after upgrading to `v2.4.1` for SSR applications.\n\n## UI components\n\nNow that you have installed all of the frameworks and libraries you can start using the whole collection of UI components and templates from the [Flowbite UI Library](https://flowbite.com/docs/getting-started/introduction/) and [Blocks](https://flowbite.com/blocks/marketing/feature/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Ftailwind-angular-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemesberg%2Ftailwind-angular-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Ftailwind-angular-starter/lists"}