DEV Community

Discussion on: Building my site with Tailwind CSS

Collapse
turbopasi profile image
Pascal Lamers • Edited

Great Read ! You mention "Repeating CSS" and " ... One of the biggest annoyance of utility-first is the repeated classes ... ". That got me thinking, have you tried using the @apply feature from tailwind ?
tailwindcss.com/docs/extracting-co...

Haven't tried tailwind myself yet, but once I read the docs, I really liked the @apply feature and I can't wait to try it :)

I think you could do

<h1 class="blue-heading">Tibit Title</h1>

.blue-heading {
   @apply bold text-2x text-blue
}

like "grouping" talwind classes

Collapse
samanthaming profile image
Samantha Ming Author

Thanks for reading my article and the positive feedback Pascal πŸ˜„

Unfortunately @apply didn't work for me. I'm using stylus with VuePress. Something about the syntax that's not working πŸ˜– But I have used their theme() function and it works perfectly πŸ‘

h1 {
  font-weight: theme('fontWeight.semibold')
}

I'm terrible at naming things, it's one of the reasons I love about Tailwind -- No more class or id names. Instead, I just apply the style directly...and with that comes the benefits of speed and moving very quickly without thinking of class names πŸ˜†

Can't wait until you give Tailwind a try! I'm a huge fan πŸ‘

Collapse
turbopasi profile image
Pascal Lamers • Edited

I am wondering if the theme () option is helpful when trying to create a darkmode/lightmode feature for a webapp πŸ€”πŸ€”

Collapse
richardeschloss profile image
Richard Schloss • Edited

@samanthaming , does the @apply statement work if you try specifying the language with the "lang" attribute? I've never tried multiple style blocks in a vue component, so I'm interested to know if this works:

<style lang="css" scoped>
/* Your tailwind css here */
/* Does @apply work here? */
</style>

<style lang="stylus" scoped>
/* Your stylus here (that you already have) */
</style>