DS Tailwind Theme Preset [Draft] - Mobile

[brianacnguyen]

We need to investigate the feasibility of using Tailwind CSS for our external component library. This includes figuring out how the configuration will work at the design system level and ensuring that the classnames can still be used when the component library is installed in other projects.

Tasks:

1. Research how to integrate Tailwind CSS into our design system.
2. Determine the best approach for configuring Tailwind CSS at the design system level.
3. Investigate how to ensure that Tailwind CSS classnames are preserved and functional when the component library is installed in other projects.
4. Document the setup process and any necessary configuration steps.
5. Create a proof of concept demonstrating Tailwind CSS usage in a component library.

Acceptance Criteria:

1. Research Documentation:

   • Detailed documentation on how Tailwind CSS can be integrated into our design system.
   • Overview of any potential challenges and solutions.

2. Configuration Setup:

   • A clear, step-by-step guide on how to configure Tailwind CSS at the design system level.
   • Explanation of how to manage Tailwind CSS configuration files.
   • Can the configuration be exported and installed like a package to the Tailwind config of product repo

3. Classname Preservation:

   • A documented strategy for ensuring Tailwind CSS classnames are preserved and functional in projects that install the component library.
   • A proof of concept demonstrating that the classnames work as expected when the library is used in an external project.

4. Proof of Concept:

   • A sample component library using Tailwind CSS, showing proper configuration and classname usage.
   • Example project demonstrating the installation and usage of the component library with preserved Tailwind CSS classnames.

5. Documentation:

   • Comprehensive documentation for developers on how to set up and use Tailwind CSS in the component library.
   • Instructions on how to install and use the component library in external projects.

Additional Information:

• Ensure the approach is scalable and maintainable.
• Consider potential impact on build times and bundle sizes.
• Collaborate with the design team to align on design tokens and styles.

This ticket aims to ensure that we have a robust and scalable approach to using Tailwind CSS in our external component library, with clear documentation and a proof of concept to guide future development.