CODEWITHSUNDEEP
sasstailwind-csscodepen
Mitya
Mitya

Reputation: 34576

Tailwind + SASS not rendering styles in Codepen

I'm playing around in Tailwind and this video suggests that you can avoid the repetition of Tailwind classes by using Sass like so:

HTML

<button class=but>Button</button>

SASS

.but {
    @apply bg-green-400 p-5 rounded-lg m-5 text-white
}

...but this isn't working for me; the styles don't get rendered and Codepen's CSS editor complains about a new line being expected. Here's my pen - it has Tailwind and Sass active.

What am I doing wrong?

Upvotes: 0

Views: 850

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14293

You're using CDN Tailwind which cannot support a lot of features @apply included - it simply cannot generate your class on the fly

Documentation says

Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.

  • You can't customize Tailwind's default theme
  • You can't use any directives like @apply, @variants, etc.
  • You can't enable additional variants like group-focus
  • You can't install third-party plugins
  • You can't tree-shake unused styles

Upvotes: 1

Related Questions