Implement Tailwind CSS

[devwhodevs]

Describe the Feature Request

Summary

We want to adopt Tailwind CSS for tarkov.dev to simplify our styling workflow, reduce custom CSS, and promote a consistent design system across the application.

Why Tailwind?

1. Utility-First Approach: Tailwind’s utility classes enable rapid prototyping without writing much custom CSS.
2. Consistent Design: Predefined spacing, color palettes, and font sizes help maintain visual consistency.
3. Performance-Optimized: Tailwind’s purge feature ensures only the classes used in our code end up in the final build.
4. Scalable & Maintainable: Utility-based styling scales nicely as the site grows, reducing complexity in the CSS layers.

Goals

• Integrate Tailwind CSS into the existing toolchain (via a plugin or config in our bundler).
• Migrate existing custom styles to Tailwind utility classes where possible.
• Ensure the final build is optimized and minimal in size.
• Document styling conventions for future contributors.

Proposed Steps

1. Install Tailwind and Dependencies

   • Add tailwindcss and postcss (if not already included) as dev dependencies.
   • Configure tailwind.config.js to match the project’s design needs.

2. Set Up Build Configuration

   • Update webpack / Vite / Next.js / (whichever bundler we use) to include Tailwind’s PostCSS plugin.
   • Ensure NODE_ENV=production or equivalent triggers Tailwind’s purge functionality.

3. Refactor Existing CSS

   • Identify and replace common patterns (spacing, typography, colors, etc.) with Tailwind utilities.
   • Keep any project-specific styles (unique animations, brand components) in a minimal custom CSS file.

4. Documentation

   • Update the project’s README or create a new STYLE_GUIDE.md explaining how to use Tailwind classes.
   • Provide code samples demonstrating the recommended approach for styling components.

5. Testing and Validation

   • Verify that the UI matches the current design after the transition.
   • Check that no style regressions occur across all supported browsers/devices.

Additional Considerations

• If we have existing third-party libraries or UI frameworks, ensure they co-exist with Tailwind or gradually phase them out if they overlap in functionality.
• Consider adding a custom color palette for brand identity (e.g., brand-specific colors for Tarkov).

Acceptance Criteria

• Tailwind CSS is installed and configured.
• Basic styling (typography, spacing, colors, etc.) is successfully migrated to Tailwind classes.
• All pages/components render without layout or styling regressions.
• Documentation is updated with guidelines for future development using Tailwind.

Please share any feedback or ideas regarding this approach before we begin.
I'm ready to do it myself, but If anyone wants to help out with the migration, feel free to chime in below!

[Applefrittr]

Pretty daunting task given the size of the code base. I'm willing to assist with some of the grunt work of refactoring some of the pages and components to employ Tailwind once point 4. has been finalized. I wouldn't want to just jump in and start changing things on the fly.

[AllanOcelot]

I think there is enough discussion on the pro's and con's of tailwind on the internet.
Personally it's not something I'm interested in - but that is purely personal preference on development and not "ooo tailwind bad".

My only real concern is "How long will it take" - along with "styling regression".

It might be useful to see how many contributors are fluent in tailwind, and their opinions on using it before we steamroll ahead.