diff --git a/adev/src/app/routes.ts b/adev/src/app/routes.ts index 7ae134d4459..c38ab5cdda3 100644 --- a/adev/src/app/routes.ts +++ b/adev/src/app/routes.ts @@ -244,6 +244,10 @@ const REDIRECT_ROUTES: Route[] = [ path: 'guide/animations/route-animations', redirectTo: '/guide/routing/route-transition-animations', }, + { + path: 'guide/tailwind', + redirectTo: 'guide/tailwind', + }, ]; export const routes: Route[] = [ diff --git a/adev/src/app/sub-navigation-data.ts b/adev/src/app/sub-navigation-data.ts index 9f9eee7ad15..23a53aa7e78 100644 --- a/adev/src/app/sub-navigation-data.ts +++ b/adev/src/app/sub-navigation-data.ts @@ -1009,6 +1009,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ path: 'ecosystem/custom-build-pipeline', contentPath: 'ecosystem/custom-build-pipeline', }, + { + label: 'Tailwind', + path: 'guide/tailwind', + contentPath: 'guide/tailwind', + }, { label: 'Angular Fire', path: 'https://github.com/angular/angularfire#readme', diff --git a/adev/src/content/guide/tailwind.md b/adev/src/content/guide/tailwind.md new file mode 100644 index 00000000000..06adce8f3b5 --- /dev/null +++ b/adev/src/content/guide/tailwind.md @@ -0,0 +1,70 @@ +# Using Tailwind CSS with Angular + +[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project. + +## Setting up Tailwind CSS + +### 1. Create an Angular project + +First, create a new Angular project if you don't have one set up already. + + +ng new my-project +cd my-project + + +### 2. Install Tailwind CSS + +Next, open a terminal in your Angular project's root directory and run the following command to install Tailwind CSS and its peer dependencies: + + +npm install tailwindcss @tailwindcss/postcss postcss --force + + +### 3. Configure PostCSS Plugins + +Next, add a `.postcssrc.json` file in the file root of the project. +Add the `@tailwindcss/postcss` plugin into your PostCSS configuration. + + +{ + "plugins": { + "@tailwindcss/postcss": {} + } +} + + +### 4. Import Tailwind CSS + +Add an `@import` to `./src/styles.css` that imports Tailwind CSS. + + +@import "tailwindcss"; + + +If you're using SCSS, add `@use` to `./src/styles.scss`. + + +@use "tailwindcss"; + + +### 5. Start using Tailwind in your project + +You can now start using Tailwind's utility classes in your component templates to style your application. + +For example, you can add the following to your `app.html` file: + + +

+ Hello world! +

+
+ +### 6. Start using Tailwind in your project + +Run your build process with `ng serve` and you should see the styled heading. + +## Additional Resources + +- [Tailwind CSS Documentation](https://tailwindcss.com/docs) +- [Angular Documentation](https://angular.dev/) \ No newline at end of file