FG
๐Ÿ’ป Software๐ŸŒ Web & Full-Stack

Tailwind CSS v1.0 To-Dos

Fresh3 days ago
Mar 14, 20260 views
Confidence Score55%
55%

Problem

Have been keeping track of this stuff in my personal to-do tracker but publishing them here in case anyone is interested. Naturally a ton of stuff has already been done for v1.0 and deleted from my to-do list, so this is only the stuff remaining as of today. Expect this list to grow and change over the next few weeks as I work towards finishing v1.0, but generally these are the things I've got lined up. They aren't in any sort of priority order or anything. Done/Merged - [x] Re-evaluate flex-grow/flex-no-grow, etc. - [x] Re-assess using postcss-selector-parser for escaping - [x] Update plugins to source their config from theme/variants - [x] Think about if there's a smarter way to make sure the separator is escaped - [ ] ~~Pass theme and variants to plugins explicitly?~~ No measurable benefit, easy to add later - [x] Add new shadows - [x] Rename config function to theme? - [x] Fix letterSpacing classes not being escaped - [x] Add 56 as a width? - [x] Add extended widths (48, 56, 64) to entire spacing scale? - [x] Make `flex-*` customizable - [ ] ~~Remove `.clearfix`?~~ Nah still useful enough to not make people add it themselves. - [x] Add new maxWidth scale - [x] Revisit which variants to enable by default for split up text style plugins - [x] Make preflight more hardcore, reset headings, etc. - [x] Autodetect presence of tailwind.config.js? - [ ] ~~Headings should inherit line-height like they inherit font-size and font-weight.~~ Not necessary, browser inherits line-heig

Error Output

Error if we find `@tailwind preflight` in your CSS or keys in the wrong place in your config file to help guide people during the upgrade process?~~ Whatever, can do this if it actually bites people.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix โ€“ Awaiting Verification

Finalize Remaining Tailwind CSS v1.0 To-Dos

Medium Risk

The Tailwind CSS v1.0 release is incomplete due to several remaining tasks that need to be addressed. These tasks include enhancements, bug fixes, and feature additions that are critical for the final release. The incomplete items may lead to inconsistencies in the framework and hinder user experience.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Implement Customizable Flex Classes

    Make the flex classes customizable by allowing users to define their own flex properties in the configuration file. This will enhance the flexibility of the framework.

    javascript
    module.exports = { theme: { extend: { flex: { 'custom': '0 1 auto' } } } }
  2. 2

    Add New Widths to Spacing Scale

    Extend the spacing scale to include new widths (48, 56, 64) to provide more options for layout design. This will allow developers to create more responsive designs.

    javascript
    module.exports = { theme: { extend: { spacing: { '48': '12rem', '56': '14rem', '64': '16rem' } } } }
  3. 3

    Enhance Preflight Styles

    Revise the preflight styles to ensure a more comprehensive reset of default browser styles, including headings. This will provide a more consistent baseline for styling.

    css
    @tailwind preflight; h1, h2, h3 { line-height: 1.5; }
  4. 4

    Implement Error Handling for Configuration

    Add error handling to detect incorrect usage of `@tailwind preflight` in user CSS files or misplacement of keys in the config file. This will guide users during the upgrade process and prevent common mistakes.

    javascript
    if (css.includes('@tailwind preflight')) { throw new Error('Remove @tailwind preflight from your CSS.'); }
  5. 5

    Document Remaining To-Dos

    Create detailed documentation for the remaining tasks, outlining their purpose and expected outcomes. This will help in tracking progress and ensuring transparency in the development process.

    markdown
    /* Documentation for remaining tasks */

Validation

Confirm the fix by testing the new features and enhancements in a development environment. Ensure that the customizable flex classes work as intended, the new widths are available, preflight styles are applied correctly, and error handling triggers as expected. Review the documentation for completeness.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

tailwindcsscss