Add TailwindCSS as a Stylesheet Format Option in Angular CLI

[MitjaCH]

Command

new

Description

Currently, Angular CLI provides the option to select between various CSS preprocessors like CSS, SCSS, and LESS when creating a new project. However, TailwindCSS, a popular utility-first CSS framework, is not included as an option. With TailwindCSS being increasingly adopted, adding it as a stylesheet option would streamline the setup process for developers who use it with Angular.

Describe the solution you'd like

Add TailwindCSS as an option in the ng new command alongside the existing options (CSS, SCSS, LESS, etc.). This would enable developers to choose TailwindCSS as the default stylesheet framework during project creation, allowing for automatic setup and configuration of Tailwind in the generated project.

Describe alternatives you've considered

Alternatives Considered:

1. Installing TailwindCSS Manually After Initializing the Project
   The current workaround for using TailwindCSS with Angular involves initializing a new project with ng new and then following these steps manually:

   • Install TailwindCSS and required PostCSS plugins:

     npm install -D tailwindcss postcss autoprefixer
     

   • Generate the Tailwind configuration file:

     npx tailwindcss init
     

   • Update tailwind.config.js to define the content paths, like so:

     module.exports = {
       content: [
         "./src/**/*.{html,ts}",
       ],
       theme: {
         extend: {},
       },
       plugins: [],
     }
     

   • Configure styles.css (or styles.scss) with Tailwind directives:

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

   • Optionally, create a postcss.config.js file if not already present to ensure compatibility with Angular's build.

   While these steps are not overly complex, they add additional configuration overhead, especially for developers who are setting up multiple projects or who are new to Angular or TailwindCSS. This manual process can also introduce errors if configuration steps are missed or misconfigured.

2. Using a Third-Party TailwindCSS Integration
   Some developers have created community guides and packages that streamline the Tailwind setup for Angular, but these are not officially supported and may lack the stability or compatibility assurance that comes with a native CLI integration. Additionally, relying on third-party solutions can introduce maintenance challenges if the third-party solution is no longer actively maintained.

3. Creating a Custom Schematic for TailwindCSS Setup
   Angular allows developers to create custom schematics, which could automate the setup of TailwindCSS after project initialization. However, creating and maintaining a custom schematic requires extra knowledge and effort, and it adds another layer of customization that developers need to maintain across projects. This approach is often impractical for teams who need a simple, standard setup.

Conclusion:
Adding TailwindCSS as an option in the Angular CLI would remove the need for these workarounds, allowing developers to select TailwindCSS during project initialization and have it configured automatically. This native support would reduce setup time, avoid common configuration errors, and enhance the developer experience by aligning Angular with modern CSS practices.

[NilsJanosch]

--- Kanye West (YE) --- I support you, i need it aswell.

[bomba-cat]

The idea is truly good, since i use a lot of Tailwind myself whenever i do anything Frontend related.

[alexshahini12345678]

Great idea! I faced challenges installing TailwindCSS the first time with Angular, so this could be incredibly helpful for many developers.

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[Linussl]

I not only want it... I NEED ITTTTT!!

[Logoko709]

Integrating TailwindCSS directly into the Angular CLI would be a fantastic quality-of-life improvement, streamlining setup and reducing common configuration hassles for developers.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}