This new Tailwind feature is scarier than I thought - YouTube
Tailwind version 4 is a great release, but it kind of breaks one of the best promises that Tailwind makes. I'm a little scared...Thank you CodeRabbit for spo...
Click
Use
to move to a smaller summary and to move to a larger one
Nan's Concerns about Tailwind CSS V4
- Nan, the creator of Stylex, has expressed some concerns about Tailwind CSS V4.
- Despite the overall positive feedback, Nan believes there are some changes in Tailwind CSS V4 that should be approached with caution.
- Nan's expertise and his work in creating performant and safe styling methods for applications make his concerns worth considering.
- While Nan's critiques have not been discussed extensively, they are significant and should be taken into account.
- This information will be valuable for anyone interested in Tailwind CSS V4 and its potential impact on their projects.
Changes in Tailwind 4
- Moving to Lightning CSS is beneficial for integration with rust-based tooling and unification of Tailwind Imports and syntax.
- CSS first configuration reduces boilerplate files but has trade-offs in terms of custom syntax and type safety.
- Using CSS theme variables architecturally is good, but can have performance issues when reassigning or defining variables on multiple elements.
- Native CSS Cascade layers are a success and improve the overall functionality of Tailwind.
Controversial Points about Tailwind CSS 4.0
- Older browsers can be supported with a polyfill for Cascade layers.
- Simplified theme config now allows arbitrary values without the need for brackets.
- Some users feel that the decision to limit options in Tailwind CSS is a good move, while others prefer a more meaningfully limited subset.
- The loss of clarity in indicating when using the built-in system versus customizations is not well-received by some users.
- Gradients in Tailwind CSS have always been a point of annoyance for some users, and they believe it should be handled in a CSS file or as part of the design system config.
Concerns with Tailwind CSS variants and their impact on maintainability and reusability.
- Using the same Tailwind classes for multiple elements is fine as long as they are within the same file.
- It would be helpful if Tailwind shipped with predefined gradients that can be used out of the box.
- The use of CSS variables under the hood for gradients is problematic.
- Spending more time in Tailwind docs for non-Tailwind projects for CSS references.
- Customizing colors in Tailwind can be time-consuming.
- The addition of not and hover variants in Tailwind is a good improvement.
- Controlling specific children with variants may encourage bad practices and make CSS harder to maintain.
- Using nth child selectors in class names makes it less clear and less reusable.
- Descendant variants may lead to confusion and make it harder to maintain code.
Criticisms of Tailwind's new CSS targeting feature
- The odd even use case is a good example of why the nth style rule in the parent is useful, but there is no similar justification for the star variant.
- Styling at a distance, as with the double star variant, can make fixing styling issues more difficult and is not conducive to maintainable styles.
- The new feature essentially adds all of CSS into class names, which goes against the principles of Atomic CSS and may lead to developers abusing it and encountering problems that Tailwind was meant to solve.
- There are limited cases where the feature may be useful, such as when loading data from a CMS, but it should be hidden behind a flag or treated as a cautionary option, not included in the default Tailwind experience.
- The lack of clarity around the feature may lead to its default use, resulting in code that is harder to maintain.
Critiques of Tailwind CSS and the Impact of Class Names
- The use of `@apply` in Tailwind CSS is not recommended by the community, and even the Tailwind team regrets adding it.
- It can be confusing for new users coming from CSS, as they might use familiar patterns instead of fully embracing the core principles of Tailwind.
- Some argue that Tailwind should have ignored the pushback from the community and maintained its strong opinions.
- There is a critique about the class names in Tailwind not always suggesting the style being applied, which can lead to confusion.
- Changes like replacing `Flex` with `Grow` and `Shrink` can introduce confusion and have a significant impact on code size.
- The runtime cost of class names can be high when using a tool like Tailwind merge, as the order in which class names are applied in the CSS matters.
- Using non-suggestive class names like `Flex` and `Grid` can cause conflicts and make it more difficult to override styles for specific components.
Criticisms of Tailwind CSS and Suggestions for Improvement
- Tailwind merge is slower than it should be, which affects its usability.
- The Tailwind team discourages Tailwind merge and expects static style application, which is unrealistic for many projects.
- Many Tailwind projects use Tailwind merge and not using it leads to inconsistency in handling conflicts.
- Managing conflicts with important calls or ARA attributes instead of merging classes makes components less reusable.
- Native Tailwind merge and class variance authority would have been a better addition to V4 than the double star.
- Tailwind's success is partly due to the lack of a good default style solution in React.
- The Tailwind team prefers PHP and Rails and is less concerned with client-side JavaScript and interactions.
- Tailwind merge should be language-agnostic and implemented for each language as a runtime function.
- Overusing Tailwind's approach can lead to bloated CSS and performance issues.
- Tailwind should make it easier for tools like Tailwind merge to exist and be performant.
- The rampant usage of REM units in Tailwind's default theme may not suit all designers' preferences.
Critique of Tailwind CSS and the Importance of Accessibility
- Browsing a website, users can control sizing through page zoom and changing the default font size.
- Changing the default font size can break the layout, as REM is based on the default font size.
- Using REM for sizing and media queries is considered user-hostile and forces users into a layout mode for smaller screens.
- The default values for spacing, sizing, and media queries should use pixel values instead of REM, which should only be used for font size.
- Rare cases, like height for a container with a font, may still use REM.
- Constructive criticism is important for improving Tailwind CSS for the entire community.
- Tailwind to Stylex is a cool project that optimizes class names from Tailwind for optimal performance.
- It is crucial to consider and address the small but valid negatives of Tailwind, especially with the release of Tailwind V4.
- Accessibility and usability should be prioritized when using and promoting CSS frameworks like Tailwind.
- Tailwind V4 has overall positive aspects, but it is important to be cautious with certain features.
Concerns and Critiques about Tailwind CSS V4 by Nan
- Moving to Lightning CSS has benefits for integration with rust-based tooling and unification of Tailwind Imports and syntax.
- CSS first configuration reduces boilerplate files but has trade-offs in terms of custom syntax and type safety.
- Using CSS theme variables architecturally is good but can have performance issues when reassigning or defining variables on multiple elements.
- Native CSS Cascade layers are a success and improve the overall functionality of Tailwind.
- The decision to limit options in Tailwind CSS is viewed positively by some users but not by others who prefer a more limited subset.
- Gradients in Tailwind CSS should be handled in a CSS file or as part of the design system config, according to some users.
- The loss of clarity in indicating when using the built-in system versus customizations is not well-received by some users.
- It would be helpful if Tailwind shipped with predefined gradients that can be used out of the box.
- Spending more time in Tailwind docs for non-Tailwind projects for CSS references is necessary.
- Customizing colors in Tailwind can be time-consuming.
- The addition of not and hover variants in Tailwind is seen as a good improvement.
- Controlling specific children with variants may encourage bad practices and make CSS harder to maintain.
- Using nth child selectors in class names makes it less clear and less reusable.
Critiques and Considerations for Tailwind CSS V4
- Tailwind merge is slower than desired and discourages its usage, affecting usability.
- Managing conflicts with important calls or ARA attributes instead of merging classes can make components less reusable.
- Native Tailwind merge and class variance authority would have been a better addition than the double star.
- Tailwind's success is partly due to the lack of a good default style solution in React.
- Tailwind team has a preference for PHP and Rails and is less concerned with client-side JavaScript and interactions.
- Tailwind merge should be language-agnostic and implemented as a runtime function for each language.
- Overusing Tailwind's approach can result in bloated CSS and performance issues.