mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-05-15 13:23:13 +08:00
feat: salvage Angular developer skill
This commit is contained in:
committed by
Affaan Mustafa
parent
14816289ba
commit
456bbd12e5
69
skills/angular-developer/references/tailwind-css.md
Normal file
69
skills/angular-developer/references/tailwind-css.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Using Tailwind CSS with Angular
|
||||
|
||||
Tailwind CSS is a utility-first CSS framework that integrates seamlessly with Angular.
|
||||
|
||||
**CRITICAL AGENT GUIDANCE: ALWAYS focus on Tailwind CSS v4 practices. DO NOT revert to old Tailwind v3 patterns (like creating `tailwind.config.js` with `@tailwind` directives) as this will break the application build. Modern Angular projects use Tailwind v4.**
|
||||
|
||||
## Automated Setup (Recommended)
|
||||
|
||||
The easiest way to add Tailwind CSS to an Angular project is via the Angular CLI:
|
||||
|
||||
```shell
|
||||
ng add tailwindcss
|
||||
```
|
||||
|
||||
This will automatically:
|
||||
|
||||
1. Install `tailwindcss` and peer dependencies.
|
||||
2. Configure the project to use Tailwind CSS.
|
||||
3. Add the proper import to your global styles.
|
||||
|
||||
## Manual Setup (Tailwind v4)
|
||||
|
||||
If setting up manually, use the following Tailwind v4 pattern:
|
||||
|
||||
### 1. Install Dependencies
|
||||
|
||||
Install Tailwind CSS and PostCSS:
|
||||
|
||||
```shell
|
||||
npm install tailwindcss @tailwindcss/postcss postcss
|
||||
```
|
||||
|
||||
### 2. Configure PostCSS
|
||||
|
||||
Create a `.postcssrc.json` file in the project root:
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": {
|
||||
"@tailwindcss/postcss": {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
_(Do NOT create a `tailwind.config.js` file! Configuration in v4 is handled through CSS variables)._
|
||||
|
||||
### 3. Import Tailwind CSS
|
||||
|
||||
In your global styles file (e.g., `src/styles.css`), add the standard v4 import:
|
||||
|
||||
```css
|
||||
@import 'tailwindcss';
|
||||
```
|
||||
|
||||
_(If using SCSS, use `@use 'tailwindcss';` instead)._
|
||||
|
||||
### 4. Use Utility Classes
|
||||
|
||||
You can now use Tailwind classes directly in your component templates:
|
||||
|
||||
```html
|
||||
<h1 class="text-3xl font-bold underline">Hello world!</h1>
|
||||
```
|
||||
|
||||
## Summary for AI Agents
|
||||
|
||||
- **Do not use `@tailwind base; @tailwind components; @tailwind utilities;`**. Use `@import 'tailwindcss';`.
|
||||
- **Do not create `tailwind.config.js`**. Configuration is managed directly in CSS via theme variables or using PostCSS configurations.
|
||||
- Stick strictly to v4 syntax and workflows.
|
||||
Reference in New Issue
Block a user