Benefits

1. Type-safety

Bringing a type system to Tailwind was the overarching goal of this project. Let’s take a look at how you can benefit from type stability with tailwindest.

1.1 Get full type definition of tailwind

// 1. import generated types
import type { Tailwind, TailwindNestGroups } from "~/tailwind.ts"

// 2. create type
export type TailwindLiteral = CreateTailwindLiteral<Tailwind>

1.2 Autocompleted nest condition

typescript’s recursive type computation allows you to write infinite Nested Break conditions.

const autocompleted = tw.style({
    after: {
        before: {
            file: {
                "first-letter": {
                    "first-line": {
                        marker: {
                            placeholder: {
                                selection: {
                                    active: {
                                        autofill: {
                                            backgroundColor:
                                                "after:before:file:first-letter:first-line:marker:placeholder:selection:active:autofill:bg-red-500", // <-- We can strictly type this value
                                        },
                                    },
                                },
                            },
                        },
                    },
                },
            },
        },
    },
})

2. Flexibility

2.1 CSS-in-JS like syntax

Use pure css based properties to write styles.

const easyToRead = tw.style({
    display: "flex",
    flexDirection: "flex-row",
    alignItems: "items-center",
    justifyContent: "justify-center",
    gap: "gap-2",
    padding: "p-2",
    margin: "m-2",
})

2.2 Normal CSS writings

Also there is helpers for writing classnames easily(tw.def).

const easyToRes = tw.def([
    "flex",
    "flex-row",
    "items-center",
    "justify-center",
    "gap-2",
    "p-2",
    "m-2",
])

3. Reusability

tailwindest handles string. That means, we can reuse all the elements of function.

3.1 Reuse all objects

const box = tw.style({
    display: "flex",
    flexDirection: "flex-row",
    alignItems: "items-center",
    justifyContent: "justify-center",
    gap: "gap-2",
})

1. classname: string

   get classname

   const boxClass = box.class()
   // flex flex-row items-center justify-center gap-2

2. styleSheet: object

   extract styleSheet

   const boxStyle = box.style()
   /**
   {
       display: "flex",
       flexDirection: "flex-row",
       alignItems: "items-center",
       justifyContent: "justify-center",
       gap: "gap-2",
   }
   **/

classname and styleSheet are just string and object. So you can modifying it whatever you want.

It’s time to dive 🏄

Now, you are ready to dive in. Let’s get into it!