[Feature] Rewrite UI to use Tailwind

[AGuyNamedJens]

Feature Description

Just like the installer UI did; #781 Rewriting the UI of the panel to use Tailwind instead of Bootstrap means we're more up-to-date, and Tailwind is commonly used alongside Laravel.

Solution Idea

Following are the advantages of using Tailwind CSS –

Using the pure CSS will require you to write more codes for adding unique features to the elements. Hence, this increases the CSS file size of your web page. Whereas, on using Tailwind CSS, you already have utility classes, so, you can directly write them and also reuse them throughout the web page. This provides us a smaller CSS file.

The utility classes available are local that is, you can update or modify without disturbing or breaking the web application. It is not possible to do so using pure CSS. It is highly customizable thus, enables us to create unique UI. It offers various features like different color palettes, styling, spacing etc.,

While using Tailwind CSS, you do not need to name the classes because they have common utility classes. This makes it easier for the developers to create custom elements.

Following are the advantages of using Bootstrap –

It is a powerful framework used for front end development.

Bootstrap offers ready-made themes and templates to the developers. This increases the speed of development.

It has introduced the idea of mobile-first in which the screen is divided into 12 grid system. It ensures cross-browsers compatibility.

It can be customized according to the project needs. It provides base styling for HTML elements like buttons, off-canvas, accordion, images, icons, tables, forms, code, topography, alerts, progress bars, dropdowns, etc.,

Additional Info

Whoever's interested in making this, please do :)

[1day2die]

i like the idea but its gonna be so much work

[IceToast]

The main work will be to migrate from adminlte3 css to really anything :D

[AGuyNamedJens]

i like the idea but its gonna be so much work

Yes it will be, but gives so much less work when it's done though, lol.

[AGuyNamedJens]

The main work will be to migrate from adminlte3 css to really anything :D

Then let's get started 😂

[BitSec01]

i like the idea but its gonna be so much work

If you want to do this you will have to do it in stages. You can make a list of all the pages you have and then start converting them one by one. Other pages which aren't converted yet can still use the normal CSS files so they won't break.

Bootstrap is honestly kinda outdated now in my opinion. Also I wouldn't just use the Tailwind CDN url but instead install Tailwind as a package to get more control.

[IceToast]

i like the idea but its gonna be so much work

If you want to do this you will have to do it in stages. You can make a list of all the pages you have and then start converting them one by one. Other pages which aren't converted yet can still use the normal CSS files so they won't break.

Bootstrap is honestly kinda outdated now in my opinion. Also I wouldn't just use the Tailwind CDN url but instead install Tailwind as a package to get more control.

To go even further i would do the stages thing as a new theme that is not the default, so the default UI is uniformly. Once most of the user accessible UI has been done it can be switched to be the default theme. Not sure if it makes sense like this