Question 45834 in CSS Question posted in
Some basic documentation can be found here.

Tailwind postcss nesting is not working with nested scss codes

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: {}
  },
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After installing postcss-cli and building with postcss fixed the issue/

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

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search