Is there a way to combine scss nesting and tailwindcss?

Question

I'm new to tailwindcss, and i want to use both sassy css and tailwind for my new project. But I'm having trouble with the nesting specially when i used "@apply".

section {
  @apply .p-4;
  ul {
    li {
      @apply .ml-8 .text-red-600;
      li:last-child {
        @apply .text-gray-300;
      }
    }
  }
}

the red color apply to all li but the last-child (gray color) is not working. I'm not sure if it's possible

Answer 1

Right now we cant combine the SCSS and tailwind file. But we can achieve this by doing like this, give a class name to ul tag mylist

section {
  @apply .p-4;
}
.mylist li {
  @apply .ml-8 .text-red-600; 
}
.mylist li:last-child {
  @apply .text-gray-300;
}

Answer 2

Selector you're trying to build here will be compiled to something like:

section ul li li:last-child {...}

I think what you're trying to achieve here is this:

section {
  @apply .p-4;
  ul {
    li {
      @apply .ml-8 .text-red-600;
    }
    li:last-child {
      @apply .text-gray-300;
    }
  }
}

Answer 3

You can use Sass and Tailwind together, though there are a few things to watch out for as detailed in the docs.

Though, as also noted in the docs it is recommended that you use PostCSS exclusively as your pre-processor. You can use nesting, variables and much, much more with PostCSS, there's really nothing that you can do with Sass that you cannot do with PostCSS.

I switched my build process from using Sass to PostCSS exclusively, more than 3 years ago, and I've not found anything missing. Indeed I can do so much more, I've never looked back.

Answer 4

Sure they can!

Nothing's wrong with them, there are couple of very small drawbacks but nothing special.

If your case, you have a tiny mistake in your code

section {
  @apply p-4;
  ul {
    li {
      @apply ml-8 text-red-600;

      &:last-child {
        @apply text-gray-300;
      }
    }
  }
}