Proposal to Adopt Tailwind CSS for Improved Styling

[Abhijay007]

Hi, Uptane Community 👋 ,

I'd like to bring up a suggestion regarding the current styling practices on our site. we currently employ vanilla CSS styles, with each component having its own separate CSS file. This approach necessitates a considerable amount of CSS for each component, and we've encountered challenges with certain components not exhibiting the desired responsiveness.

Considering these issues, I propose a transition to Tailwind CSS to overhaul our site styles. Tailwind offers several advantages over vanilla CSS, including rapid development, consistency, a mobile-first approach, increased customization capabilities, the need for minimal CSS, enhanced flexibility, and support for responsive design.

Switching to Tailwind would not only enhance the site's visual appeal but also streamline the development process. Tailwind has gained widespread adoption in open-source projects, fostering a robust community. This community support can potentially attract volunteers to contribute and expand our existing set of components.

I encourage everyone to consider this proposal and share your thoughts on adopting Tailwind for our site. Your feedback and contributions are vital to making this transition successful. Let's leverage the benefits of Tailwind CSS to improve our site's design, responsiveness, and overall user experience.

Here are a few resources below to see how we can leverage Tailwind in our documents project and how some sites are already doing the same.

1. A Guide to Seamless Integration with Tailwind CSS in Docusaurus
2. Using Tailwind CSS v3 in Docusaurus in 5 Steps
3. Example from Medusa.js, an open-source project utilizing Tailwind in Docusaurus
4. Supabase, another popular OSS project using SCSS + Tailwind + Docusaurus

If you have any suggestions or alternative approaches for this transition, please feel free to share them in the discussion below. I am looking forward to your valuable input and support in making our site more efficient and responsive.

Thank you!

[Abhijay007]

cc : @hexsecs

[Nishu0]

Hey @Abhijay007, I think it is a great idea to switch to Tailwind CSS for current site. I agree that Tailwind would make the site more consistent, responsive, and customizable. I also like the idea of having less CSS code and more flexibility in styling our components. I think this would make our site easier to maintain and debug.

I have some experience with Tailwind and I would be happy to start contributing to converting existing components to Tailwind. I have read the resources that you shared and I think they are very helpful and informative.

[Abhijay007]

Hey @Abhijay007, I think it is a great idea to switch to Tailwind CSS for current site. I agree that Tailwind would make the site more consistent, responsive, and customizable. I also like the idea of having less CSS code and more flexibility in styling our components. I think this would make our site easier to maintain and debug.

I have some experience with Tailwind and I would be happy to start contributing to converting existing components to Tailwind. I have read the resources that you shared and I think they are very helpful and informative.

Opened this issue around the same

[devilkiller-ag]

@Abhijay007 I think the resource 1 that you provided is enough to understand how to set up the tailwind css with docusaurus. But these tutorials (resource 1 and 2) use inline tailwind css. The open source projects you shared were using tailwind css through an external css file.

To decide which mode (inline or external) we should use we have to focus on what's our second aim besides making our website style consistent and streamlining the development process:

1. Remove the requirements of using different css files for separate components?(In this case we can consider inline css)

OR

2. Reduce the repeating and non-consistent css code? (In this case we should consider creating a general style components using tailwind css which is stored in a external css file and be used with any component throughout our codebase).

Do let me know your pointview on this and If I am thinking in the correct direction.

---

Originally posted at #179

[MyBaBB]

Hi, I can help you convert to tailwind if you like. I like to use Both, I like the ability to write in it with tailwind first and then break it down to CSS to clean it up. I leave my media queries in-line in Tailwind. To me that's the biggest issue, assign class to everything. If you need a helper let me know I can work it backwards and forwards.

[Abhijay007]

"Hi @MyBaBB, thank you for showing interest in this issue. You can follow the further discussion on this issue here: #179 and understand the issue in more detail. @devilkiller-ag opened a PR: #182 around the same. You can look into this and share your views on the same."

[MyBaBB]

Thanks, I didn't realize that it was python , I am javascript. I like your ideas though. I didn't mean to step on the others guys toes. I am relatively new to the scene and am more or less learning how to contribute. Thanks for understanding.

…

On Tue, Feb 6, 2024, 11:20 PM Abhijay Jain ***@***.***> wrote: "Hi @MyBaBB <https://github.com/MyBaBB>, thank you for showing interest in this issue. You can follow the further discussion on this issue here: #179 <#179> and understand the issue in more detail. @devilkiller-ag <https://github.com/devilkiller-ag> opened a PR: #182 <#182> around the same. You can look into this and share your views on the same." — Reply to this email directly, view it on GitHub <#177 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4VTGWJ4OV4ECDIK4ZCKFM3YSMTLJAVCNFSM6AAAAABCFUI4OCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGOJRG44DI> . You are receiving this because you were mentioned.Message ID: ***@***.***>