GitAuto: Replace current CSS with tailwind CSS #47
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![gitauto-for-dev[bot]](https://avatars.githubusercontent.com/in/828792?s=60&v=4){kind=small}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Original issue: #35
What is the feature
The feature involves replacing the current CSS styling with Tailwind CSS in the project.
Why we need the feature
Tailwind CSS offers a utility-first approach to styling, which can significantly speed up the development process by providing pre-defined classes that can be composed to build custom designs directly in the markup. This can lead to more maintainable and scalable code, as well as a more consistent design system across the application.
How to implement and why
Install Tailwind CSS: Begin by installing Tailwind CSS via npm or yarn. This will allow us to integrate it into our build process.
Configure Tailwind: Create a
tailwind.config.jsfile to customize the default configuration. This step is crucial for setting up custom themes, colors, and other design tokens that align with the project's branding.Purge Unused CSS: Set up the purge option in the Tailwind configuration to remove unused styles in production builds, which will help in keeping the CSS bundle size small.
Refactor Existing Styles: Gradually replace existing CSS classes with Tailwind's utility classes. This can be done incrementally, starting with common components or pages, to ensure a smooth transition.
Test and Validate: After refactoring, thoroughly test the application to ensure that the new styles are applied correctly and that there are no regressions in the UI.
Documentation: Update any relevant documentation to reflect the changes in the styling approach, including any new guidelines for using Tailwind CSS in the project.
About backward compatibility
Backward compatibility is not a concern in this case as the change is purely related to styling. However, care should be taken to ensure that the visual appearance of the application remains consistent with the previous design, unless intentional changes are made.
Test these changes locally