[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

[LakshmiBhaskarPVL]

im gonna actually try to do this

[S0ly]

@LakshmiBhaskarPVL if you are willing to make it and actually known tailwind, there is a possibility that @1day2die have a bounty on that

[LakshmiBhaskarPVL]

starting to work on this today
cant work on #254 rn
discord temp banned me for too many api requests
they understood the situation so ill be back to that work in 10 -15 days
until then ill work on this

[S0ly]

you should check discord API rate limit and work whit them

[jameskitt616]

While we are at it, we could work on some prettier UI in general.
We could also write some basic tailwind components or whatever to unify the design here and there.

[S0ly]

ctrlpanel clearly need a design rework but it may be complicated to start from zero, maybe some html template could help

[AGuyNamedJens]

Yeah my original plan was to do it throughout templates / partial replacements, unfortunately my time got so limited I kept it open for others. Especially using the components Laravel / Tailwind have available. It would work wonders on some pages, especially the main stuff.

[1day2die]

We can either use tailwind or use this https://ui.shadcn.com/

updating step my step using components would be great. would also greatly improve UI coding speed in the future and should actually be quite easy to implement if done step by step

[1day2die]

@LakshmiBhaskarPVL please keep us updated on your progress. maybe we can help once you started. I probably will. If you create a PR we can all work on it together

[LakshmiBhaskarPVL]

rewriting started

[LakshmiBhaskarPVL]

im using vite and scss together and As @BitSec01 said, imma be using the actual tailwind package not the cdn

[LakshmiBhaskarPVL]

you should check discord API rate limit and work whit them

i forgor to check that

[jameskitt616]

We can either use tailwind or use this https://ui.shadcn.com/

updating step my step using components would be great. would also greatly improve UI coding speed in the future and should actually be quite easy to implement if done step by step

a similar thing exist for tailwing. Tailwind-UI https://tailwindui.com/
Those are pre-build components (some of them are available free).

I would do it something like writing re-useable css classes to be put together to components like widgets, page skeleton etc(tailwind can be used for this as well)

[1day2die]

@LakshmiBhaskarPVL can you create a PR?
im very interessted in your progress and would join in on the work

[LakshmiBhaskarPVL]

sure

We can either use tailwind or use this https://ui.shadcn.com/
updating step my step using components would be great. would also greatly improve UI coding speed in the future and should actually be quite easy to implement if done step by step

a similar thing exist for tailwing. Tailwind-UI https://tailwindui.com/ Those are pre-build components (some of them are available free).

I would do it something like writing re-useable css classes to be put together to components like widgets, page skeleton etc(tailwind can be used for this as well)

im using both shadcn and tailwind

[jameskitt616]

I personally wouldnt bring in too many 3rd party dependencies. That often doesnt end well.
And especially for pre-build components, your needs often change and sometimes the given functionality is not possible anymore to be done with the pre-builds.
So i would only keep it to tailwind and style your own stuff. It's not like you can build your own stuff which looks very like the stuff as shadcn etc.

Also another thing to consider: the less cdn calls the application does, the better. There have been many court cases where people got sued for not stating in their privacy policy etc that there is a dependency to e.g. query etc doing constant cdn calls from the users Browser, essentially leaking private information like IP addresses unknowingly to 3rd party.

[1day2die]

we usually ship all scripts in app, without cdn