Use tailwindcss to replace bootstrap ui framework

[tanjie123]

Overview of the feature request

Tailwind CSS is a more popular UI framework, with more and more projects built on it.

Motivation for or Use Case

Tailwind CSS and Bootstrap UI are both popular front-end frameworks, but they have different design philosophies and usage methods. Here are some advantages of Tailwind CSS over Bootstrap UI:

1. More flexible customizability:

   • Tailwind CSS provides a series of atomic classes that allow you to define styles directly in HTML, which makes customization more flexible and intuitive. You can combine these atomic classes according to specific needs instead of being limited to predefined components and styles.

2. Smaller file size:

   • Tailwind CSS works based on atomic classes, which only outputs the styles you actually use, so the generated CSS files are usually much smaller than Bootstrap, which can improve page loading speed and performance.

3. Fewer style conflicts:

   • In Bootstrap, you may encounter style conflicts, especially when customizing themes or combining with other CSS frameworks. Since Tailwind CSS's atomic classes are independent, style conflicts are less likely.

4. More suitable for responsive design:

   • Tailwind CSS provides a wealth of responsive classes, which can easily achieve layout and style adjustments under different screen sizes, making the development of responsive websites simpler and more intuitive.

5. Easier to understand and learn:

   • Although beginners may need some time to adapt to the concept of atomic classes, once they are familiar with how Tailwind CSS works, they will find it very intuitive and easy to understand. In contrast, learning Bootstrap may take more time because it has more components and options.

6. Better scalability:

   • Tailwind CSS provides a rich plug-in system and customization options. You can easily extend the framework and add customized styles and functions to meet the needs of specific projects.

In general, the advantages of Tailwind CSS lie in its flexibility, customization and performance optimization, which is particularly suitable for developers who want more freedom to control the interface style and layout.

Related issues or PR

[mraible]

You should be able to create a blueprint for this. It might be difficult to support all three frameworks: Angular, React, and Vue. Maintaining it might be painful. Be careful what you ask for. 😉

If it becomes popular, we can integrate it into the main generator.

[snapshotleisure]

Hi @mraible, I was wondering if there was any good guides on how to do a blueprint for this type of work? I was trying to find some doco or videos, however they don't exactly provide a break down on how the blueprint is constructed

Thanks!

[mraible]

This is our documentation for creating a blueprint: https://www.jhipster.tech/modules/creating-a-blueprint

I've created a couple of blueprints for Ionic and Spring Native, but honestly, @mshima has done most of the work to make them functional.

[atomfrede]

I am still struggling to start my playwright blueprint as a lot things seem to be changing. I will hopefully get started when the days are getting shorter again :)