[Feature] : Pass the prop directly to the TailwindCSS

[alamenai]

Hi @typicode ,

Thank you for this new library.

I like the idea of generating components from CSS instead of integrating CSS in JS.

Honestly, adding CSS to JS is kind of a mess.

I already started using the library (or tool), however, while I was trying to discover the syntax, an idea came to me and I wanted to share it if it is possible to implement it.

@scope (.button) {
  button:scope {
    /* Default style */
    @apply text-base rounded-sm;

    &[data-size='lg'] {
      @apply text-lg;
    }

    &[data-size='sm'] {
      @apply text-sm;
    }

    &[data-danger] {
      @apply bg-red-700 text-white;
    }
  }
}

In the code above, yu see that we repeating the prop checking to apply the TailwidCSS, is it possible to make it like this :

@scope (.button) {
  button:scope {
    /* Default style */
    @apply text-base rounded-sm;
    &[data-size]{
     @apply text-[data-size]
     }  
  }
}

[The-Code-Monkey]

Not currently possible @alamenai as text-[sm] doesn't work as far as I am aware in Tailwind. As Tailwind would treat sm as a custom value and add that to the styles.

[The-Code-Monkey]

@alamenai I will take a look into this as playing with tailwind v4 the apply directive is deprecated so i will have to see if there is a better solution.

[typicode]

Hi @alamenai

That's quite smart 👍 However, one of the design goal of MistCSS that I'd like to keep is not have to transform CSS, just pure CSS.

Regarding @apply, they're recommending theme() instead AFAIK

tailwindlabs/tailwindcss#13064

.card {
  background-color: theme(colors.white);
  border-radius: theme(borderRadius.lg);
  padding: theme(spacing.6);
  box-shadow: theme(boxShadow.xl);
}

It would be great if the Tailwind example in the doc could be updated though.
https://github.com/typicode/mistcss/blob/main/docs/getting-started.md

[The-Code-Monkey]

Yeah I agree with what @typicode said I completely forgot they added theme, I will write a v4 section into the tailwind docs,

In regards to dynamic stuff like that I would say it should be done using the classname param rather than adding some complex dynamics into the renderer.

[The-Code-Monkey]

@typicode @alamenai I believe I have just come across the same need for this functionality, I also think I may have come up with a possible solution, I will open a separate ticket as my solution currently has another limitation.