v2.3.6 🔮

Bug Fixes 🐛

• [fix] aspect ratio supports arbitrary values @danpacho, @jbs-marcus (#121)

Full Changelog: v2.3.5...v2.3.6

v2.3.5 🔮

New Features 🚀

• Refactor: add x, y direction for overflow property @danpacho (#117)

Add missing x, y directions for overflow property for adjust proper expected behavior of multiple overflow props

Because, tailwind allows us to write overflow classes like this.

<Box className="overflow-hidden overflow-x-auto overflow-y-scroll" />

Now, we can write it using tailwindest via new properties, overflowX and overflowY

const box = tw.style({
    overflow: "overflow-hidden",
    overflowX: "overflow-x-auto",
    overflowY: "overflow-y-scroll",
})

<Box className={box.class} />

Credits 🔮

Thank you @jbs-marcus!

Full Changelog: v2.3.4...v2.3.5

v2.3.4 🔮

Bug Fixes 🐛

• [bug] tw.variants type is not correctly inferred @danpacho (#115)

Full Changelog: v2.3.3...v2.3.4

v2.3.3 🔮

Bug Fixes 🐛

• 🐛 Corrected TextIndent variants typing @jbs-marcus (#112)

Thank you @jbs-marcus :)

Full Changelog: v2.3.2...v2.3.3

v2.3.2 🔮

Bug Fixes 🐛

• 🐛 fix: TS4023 type error fixed @danpacho (#109)
• 🐛 fix: update wrong name for font-style class @lbar (#108)

New contributor 🔮

• @lbar, thank you for fixing the bug :)

Full Changelog: v2.3.1...v2.3.2

v2.3.1 🔮

• 🔨 gitmoji is no longer a hidden global dependency @jbs-marcus (#105)
• build(deps-dev): bump vite from 4.2.3 to 4.5.3 in /examples/svelte @dependabot (#95)
• build(deps): bump tar from 6.1.15 to 6.2.1 in /examples/expo-nativewind @dependabot (#96)

Bug Fixes 🐛

• 🐛 add missing word break properties (fixes #103) @jbs-marcus (#104)

New contributor

• @jbs-marcus thank you :)

Full Changelog: v2.3.0...v2.3.1

v2.3.0🔮

Update versions

npm i tailwindest@latest

New Features 🚀

Add support for tailwindcss v3.4

• [feature-request] tailwindcss v3.4 @danpacho (#91)

Warning ⚠️

• Deprecate ShorTailwindest type.

In a nut shell 🐚

1. 🔮 Add support for tailwindcss v3.4

Support New size-* utilities
Support Dynamic viewport units
Support Style children with the * variant
Support Subgrid support
Support Extended min-width, max-width, and min-height scales
Support Extended opacity scale
Support Extended grid-rows-* scale
Support New forced-colors variant
Support New forced-color-adjust utilities

2. 🚨 Deprecate ShortTailwindest type

Tailwindest is a project that aims to improve the readability and maintainability of taiwlindcss. However, I've found that writing styling using the ShortTailwindest type does not overcome the problems with tailwindcss, and actually makes it less readable. Therefore, ShortTailwindest is deprecated.

Full Changelog: v2.2.1...v2.3.0

v2.2.1 🔮

Bug Fixes 🐛

• [fix] add missing vertical align property @danpacho (#73)
• [fix] aria prefix is not applied at custom aria field @danpacho (#72)

Full Changelog: v2.2.0...v2.2.1

v2.2.0 🔮

New Features 🚀

• 66 redesign generic option @danpacho (#67)

What is cool thing about this update? 🧐

When customizing screens and aria attributes, we currently use a rather strange syntax, such as conditionA and conditionB. Also, we can't fine-tune the approach of each nest conditions.

For example, break conditions must start with @, pseudo classes must start with :, and pseudo elements must start with ::. Changing the structure to allow users to customize these identifiers.

type MyTailwindest = Tailwindest<
    {
        color: "my-color1" | "my-color2"
        screens: {
            conditionA: "@weird1"
            conditionB: "@weird2"
        }
    },
    {
        aria: {
            conditionA: "my-aria1"
            conditionB: "my-aria2"
        }
        listStyleType: "emoji"
    }
>

Improve DX 🛠️

So now we can customize Tailwindest type like this same as ShortTailwindest

type MyTailwindest = Tailwindest<
    {
        color: "my-color1" | "my-color2"
        screens: "ipad" | "iphone13pro" | "iphone13proMax"
    },
    {
        aria: "my-aria1" | "my-aria2"
    },
    {
        breakIdentifier: "$"
        pseudoClassIdentifier: "_"
        pseudoElementIdentifier: "_"
    }
>

1. you can define custom screens and aria value more easily and without number limitations(previously up to 26).
2. you can customize each nest identifier keywords by 3rd generic option.

const tw = createTools<MyTailwindest>()

const box = tw.style({
     $md: {},
     _hover: {},
     _after: {},
   // nice!
})

Breaking api changes 🚨

There is three major api breaking changes. So you SHOULD check it before update!

1. group and peer, should access via group and peer property not @group and @peer
2. '@aria' and $aria is now removed, all aria properties should be access like aria-{condition}
3. Tailwindest type generic options is changed.
   • Add 3rd optional option for identifier customization
   • Change aria, screens option type to string literal, not object type

Full Changelog: v2.1.3...v2.2.0

v2.1.3 🔮

Maintenance 🍦

• ♻️ refactor: remove unused type code and improve type performance @danpacho (#65)
• 🚨 fix: ::backdrop attribute going into the pseudo class.
• 🔮 feature: add :optional to the pseudo classes.

Full Changelog: v2.1.2...v2.1.3