{"id":29313005,"url":"https://github.com/balita1124/angular-tailwindcss","last_synced_at":"2026-05-19T03:35:35.152Z","repository":{"id":301274837,"uuid":"1008032731","full_name":"Balita1124/angular-tailwindcss","owner":"Balita1124","description":"angular-tailwindcss","archived":false,"fork":false,"pushed_at":"2025-06-26T02:27:00.000Z","size":102,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-26T03:27:46.918Z","etag":null,"topics":["angular","angular-material","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Balita1124.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-06-24T23:27:03.000Z","updated_at":"2025-06-26T02:27:55.000Z","dependencies_parsed_at":"2025-06-26T03:38:28.405Z","dependency_job_id":null,"html_url":"https://github.com/Balita1124/angular-tailwindcss","commit_stats":null,"previous_names":["balita1124/angular-tailwindcss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Balita1124/angular-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Balita1124%2Fangular-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Balita1124%2Fangular-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Balita1124%2Fangular-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Balita1124%2Fangular-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Balita1124","download_url":"https://codeload.github.com/Balita1124/angular-tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Balita1124%2Fangular-tailwindcss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264049079,"owners_count":23549405,"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-material","tailwindcss"],"created_at":"2025-07-07T09:13:55.784Z","updated_at":"2026-05-19T03:35:35.084Z","avatar_url":"https://github.com/Balita1124.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular material(SCSS) with TailwindCSS\n\n## Installation\n### Create angular project \n```sh\nnpx @angular/cli@20 new angular-tailwindcss\n```\n### Add angular material\n```sh\nnpx ng add @angular/material\n```\n### Add Tailwind\n```sh\nnpm install tailwindcss @tailwindcss/postcss autoprefixer postcss-import postcss-preset-env\n```\n## Configuration\n\n### .postcssrc.json\n```json\n{\n  \"plugins\": {\n    \"@tailwindcss/postcss\": {\n      \"optimize\": {\n        \"minify\": true\n      }\n    },\n    \"postcss-import\": {},\n    \"autoprefixer\": {},\n    \"postcss-preset-env\": {}\n  }\n}\n```\n### .vscode/extensions.json\n```json\n{\n  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846\n  \"recommendations\": [\"angular.ng-template\", \"csstools.postcss\"]\n}\n```\n\n### .vscode/settings.json\n```json\n{\n  \"css.customData\": [\".vscode/tailwind.json\"]\n}\n```\n### .vscode/tailwind.json\n```json\n{\n  \"version\": 1.1,\n  \"atDirectives\": [\n    {\n      \"name\": \"@tailwind\",\n      \"description\": \"Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#tailwind\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@apply\",\n      \"description\": \"Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#apply\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@responsive\",\n      \"description\": \"You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\\n```css\\n@responsive {\\n  .alert {\\n    background-color: #E53E3E;\\n  }\\n}\\n```\\n\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#responsive\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@screen\",\n      \"description\": \"The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\\n```css\\n@screen sm {\\n  /* ... */\\n}\\n```\\n…gets transformed into this:\\n```css\\n@media (min-width: 640px) {\\n  /* ... */\\n}\\n```\\n\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#screen\"\n        }\n      ]\n    },\n    {\n      \"name\": \"@variants\",\n      \"description\": \"Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\\n```css\\n@variants hover, focus {\\n   .btn-brand {\\n    background-color: #3182CE;\\n  }\\n}\\n```\\n\",\n      \"references\": [\n        {\n          \"name\": \"Tailwind Documentation\",\n          \"url\": \"https://tailwindcss.com/docs/functions-and-directives#variants\"\n        }\n      ]\n    }\n  ]\n}\n```\n\n### styles.scss\n\n```scss\n@use \"sass:meta\";\n@use '@angular/material' as mat;\n@use 'tailwindcss';\n\n\n@use './styles/tailwind';\n\n// Defining default font\n\n$heading-font-family: Poppins, sans-serif;\n$regular-font-family: Inter, sans-serif;\n\n@include sizes.sizes();\n\n// #region: Setting @angular/material custom theme\nhtml {\n  color-scheme: light;\n  @include mat.theme((\n    color: (\n      primary: mat.$azure-palette,\n      tertiary: mat.$blue-palette,\n    ),\n    // typography: Roboto,\n    typography: (\n      plain-family: #{meta.inspect($regular-font-family)},\n      brand-family: #{meta.inspect($heading-font-family)},\n    ),\n    density: 0\n  ));\n}\n// #endregion\n\n// #region: Setting @angular/material dark theme\n.dark-theme {\n  color-scheme: dark;\n}\n```\n\n### styles/_tailwind.scss\n```scss\n@use \"tailwindcss\";\n\n// base for setting the font-families\n@layer base {\n  body {\n    // same as `plain-family` in angular material\n    font-family: var(--mat-sys-body-large-font), sans-serif;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    // same as `brand-family` in angular material\n    font-family: var(--mat-sys-display-large-font), sans-serif;\n  }\n}\n\n@utility form-field-error-icon {\n  vertical-align: bottom;\n  font-variation-settings: \"FILL\" 1;\n  height: 16px !important;\n  width: 16px !important;\n  font-size: 16px !important;\n}\n\n@utility icon-filled {\n  font-variation-settings: \"FILL\" 1;\n}\n\n// `.dark-theme` is the class name to enable dark mode in our application\n@custom-variant dark (\u0026:where(.dark-theme, .dark-theme *));\n\n// `inline` is needed to use the CSS variables in tailwind's @theme\n@theme inline {\n  --color-primary: var(--mat-sys-primary);\n  --color-on-primary: var(--mat-sys-on-primary);\n  --color-primary-container: var(--mat-sys-primary-container);\n  --color-on-primary-container: var(--mat-sys-on-primary-container);\n  --color-secondary: var(--mat-sys-secondary);\n  --color-on-secondary: var(--mat-sys-on-secondary);\n  --color-secondary-container: var(--mat-sys-secondary-container);\n  --color-on-secondary-container: var(--mat-sys-on-secondary-container);\n  --color-tertiary: var(--mat-sys-tertiary);\n  --color-on-tertiary: var(--mat-sys-on-tertiary);\n  --color-tertiary-container: var(--mat-sys-tertiary-container);\n  --color-on-tertiary-container: var(--mat-sys-on-tertiary-container);\n  --color-error: var(--mat-sys-error);\n  --color-on-error: var(--mat-sys-on-error);\n  --color-error-container: var(--mat-sys-error-container);\n  --color-on-error-container: var(--mat-sys-on-error-container);\n  --color-outline: var(--mat-sys-outline);\n  --color-outline-variant: var(--mat-sys-outline-variant);\n  --color-surface: var(--mat-sys-surface);\n  --color-surface-container-highest: var(--mat-sys-surface-container-highest);\n  --color-surface-container-high: var(--mat-sys-surface-container-high);\n  --color-surface-container-medium: var(--mat-sys-surface-container-medium);\n  --color-surface-container-low: var(--mat-sys-surface-container-low);\n  --color-surface-container-lowest: var(--mat-sys-surface-container-lowest);\n  --color-surface-container: var(--mat-sys-surface-container);\n  --color-surface-variant: var(--mat-sys-surface-variant);\n  --color-on-surface-variant: var(--mat-sys-on-surface-variant);\n  --color-on-surface: var(--mat-sys-on-surface);\n\n  // same as `plain-family` in angular material\n  --font-sans: var(--mat-sys-body-large-font), sans-serif;\n}\n\n// #region: Tailwind X Angular Material fix\n.mdc-notched-outline__notch {\n  border-style: none;\n}\n.mat-mdc-icon-button {\n  line-height: 1;\n}\n// #endregion\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalita1124%2Fangular-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalita1124%2Fangular-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalita1124%2Fangular-tailwindcss/lists"}