preflight button reset in v3 inconsistent with v2
Problem
What version of Tailwind CSS are you using? For example: v3.0.6 What build tool (or framework if it abstracts the build tool) are you using? postcss: 8.3.11 webpack: 5.65.0 What version of Node.js are you using? v14.16.1 What browser are you using? Chrome What operating system are you using? macOS Reproduction URL https://play.tailwindcss.com/AJDoBTeOhx Describe your issue https://github.com/tailwindlabs/tailwindcss/pull/5358 removes the dependency on `modern-normalize`, and then inlines and consolidates it with preflight. During this consolidation it appears as: [code block] was merged with: [code block] Resulting in [code block]` Since `[type='button']`, `[type='reset']`, `[type='submit']` have high specificity simple `background-color` and `background-image` styles included before tailwind are being overridden. This did not occur in v2 when the rules were separate. (I recognize this is not best practices but I am working in a legacy app.) I would be happy to open a PR that breaks apart the rules restoring v2 behavior (if that is desired): [code block]
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Restore Preflight Button Styles to v2 Behavior
The consolidation of styles in Tailwind CSS v3 has increased specificity for button elements, causing legacy styles to be overridden. In v2, button styles were defined separately, allowing for easier overrides by user-defined styles. The removal of `modern-normalize` and its integration with Preflight has changed the cascade order and specificity, impacting legacy applications that rely on previous styling behavior.
Awaiting Verification
Be the first to verify this fix
- 1
Create Custom CSS File
Create a custom CSS file to override the button styles affected by the Preflight changes. This file will contain the necessary styles to restore the previous behavior.
css/* custom.css */ [type='button'], [type='reset'], [type='submit'] { background-color: initial; background-image: none; } - 2
Import Custom CSS in Your Project
Ensure that the custom CSS file is imported after Tailwind CSS in your main CSS file to ensure that your styles take precedence.
css@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; @import './path/to/custom.css'; - 3
Test Button Functionality
After implementing the custom styles, test the button functionality in your application to ensure that the styles are applied correctly and that the buttons behave as expected.
bash/* Check button appearance and functionality in the browser */ - 4
Document Changes
Document the changes made to the CSS and any potential impacts on other components. This will help maintain clarity for future developers working on the project.
markdown/* Document: Restored button styles to match v2 behavior due to specificity issues in v3 */
Validation
Confirm that the button styles are displayed correctly in the browser and that they match the expected behavior from Tailwind CSS v2. Check for any unintended side effects on other components.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep