Tailwind postcss nesting is not working with nested scss codes

Question

I am trying to use scss but tailwind is not compiling as expected.

Thats how i build application.css

"build:css": "tailwindcss -i ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css"

Here is my application.scss;

@import 'application_dock/colors.scss';
@import 'application_dock/pages/spots.scss';

@tailwind base;
@tailwind components;
@tailwind utilities;


body {
  font-family: 'Noto Sans';
  background-color: var(--bg-color);
}

Spots.scss;

.spots {
  .spot {
    color: blue;

    .spot-content {
      @apply h-32;
    }
  }
}

And here is the built css file output;

.spots {
  .spot {
    color: blue;
    .spot-content{
      height: 8rem;
    }
  }
}

I expect it to be like;

.spots .spot {
  color: blue;
}
.spots .spot .spot-content {
  height: 8rem;
}

My postcss.config.js;

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {}
  },
}

Answer 1

Feels like an unspoken configuration:

$ tailwindcss -h                                                   
...
Options:
...
       --postcss            Load custom PostCSS configuration

$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.scss

Rebuilding...
.spots {
  .spot {
    color: blue;
    .spot-content {
      height: 8rem
    }
  }
}

$ tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.scss

Rebuilding...
.spots .spot {
  color: blue;
}

.spots .spot .spot-content {
  height: 8rem;
}

Just update package.json and add --postcss option, it also takes an optional path to postcss.config.js:

"scripts": {
  "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.scss -o ./app/assets/builds/application.css"
}

---

Also, consider making a spot helper/component/partial and avoid extra css and unnecessary nesting:

<!-- app/views/spots/_spot.html.erb -->
<div class="w-32 h-32 rounded-full grid place-content-center <%= color %>">
  <div class="text-white"> <%= text %> </div>
</div>

Literally spent 10 minutes playing with spots:

<div class="grid gap-2 grid-cols-[repeat(auto-fit,8rem)]">
  <% colors = %w[bg-blue-500 bg-red-500 bg-indigo-500 bg-purple-500].cycle %>
  <% 36.times do |i| %>
    <%= render "spots/spot", text: "i'm a spot ##{i}", color: colors.next %>
  <% end %>
</div>