Add Tailwind CSS for Styling [frontend]

[salazarsebas]

🎨 Add Tailwind CSS for Styling 🖌

📝 Description

Integrate Tailwind CSS into the Angular frontend to provide consistent and responsive styling for the editor and output components. Tailwind CSS will streamline the design process, ensuring a professional and modern UI while maintaining modularity and ease of maintenance.

🎯 Objective

Configure Tailwind CSS in apps/frontend/ and apply initial styles to the application’s components.

🗂 Structure

• Directory: apps/frontend/
• Files:
  • apps/frontend/src/styles.css
  • apps/frontend/tailwind.config.js
  • apps/frontend/src/app/app.component.html
• Expected structure:

  apps/frontend/
  ├── src/
  │   ├── app/
  │   │   └── app.component.html
  │   └── styles.css
  ├── tailwind.config.js
  

✅ Requirements

• Install Tailwind CSS with bun add tailwindcss postcss autoprefixer.
• Initialize Tailwind with bun x tailwindcss init.
• Configure tailwind.config.js to scan src/**/*.{html,ts}.
• Update src/styles.css with Tailwind directives:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

• Apply Tailwind classes to app.component.html for layout (e.g., container mx-auto p-4).
• Ensure styles are applied to EditorComponent and OutputComponent (in later issues).
• Commit changes with a message like feat: add tailwind css styling.
• Push changes to the GitHub repository.

🏆 Expected Outcomes

• Tailwind CSS is integrated and functional in the Angular project.
• Basic layout styling is applied to app.component.html.
• Styles are ready for use in other components.
• Changes are committed and pushed to GitHub.

🔗 References

• Tailwind CSS Angular Setup
• Tailwind CSS Configuration
• Angular Styling

📋 Notes

• Test responsiveness across different screen sizes.
• Keep Tailwind classes minimal to avoid bloated HTML.

[pushkarm029]

I’d like to work on this issue by integrating Tailwind CSS into apps/frontend/, configuring it with bun and tailwind.config.js to scan Angular templates, and updating styles.css with the necessary directives. I’ll apply a clean, responsive base layout to app.component.html, keeping classes minimal and modular so future components like the editor and output can build on it easily. I’ve worked extensively with frontend styling in modern frameworks alongside Rust/WASM projects, so I can deliver a professional setup that follows best practices.

Recommended by OnlyDust for outstanding experience and quality contributions.

[pushkarm029]

Hey, I can complete this quickly. Thanks @salazarsebas