Unexpected unknown at-rule "@screen"

sage
1

I’m having this error with tailwind

✘ sage ./public [9f42d1e1a9128bf8e6c6]
│
├─ ✘ error
│ [stylelint]
│ resources/styles/layouts/_header.scss
│ 7:5 :heavy_multiplication_x: Unexpected unknown at-rule “@screen” scss/at-rule-no-unknown
│
├─ entrypoints
│ ├─ app
│ │ └─ js/app.js 258.85 kB
│ └─ editor
│ └─ js/editor.js 226.83 kB
│
├─ assets
│
└─ compiled 116 modules in 2s 535ms

Here’s my stylelint

module.exports = {
  extends: [
    '@roots/sage/stylelint-config',
    '@roots/bud-sass/stylelint-config',
    '@roots/bud-tailwindcss/stylelint-config',
  ],
  rules: {
    'color-no-invalid-hex': true,
    'no-empty-source': null,
    'string-quotes': 'double',
    'at-rule-no-unknown': [
      true,
      {
        'ignoreAtRules': [
          'tailwind',
          'apply',
          'responsive',
          'variants',
          'screen',
          'extend',
          'at-root',
          'debug',
          'warn',
          'error',
          'if',
          'else',
          'for',
          'each',
          'while',
          'mixin',
          'include',
          'content',
          'return',
          'function',
          'tailwind',
          'apply',
          'responsive',
          'variants',
          'screen',
        ],
      },
    ],
  },
}

and here’s my scss

.container-fluid {
    @apply flex flex-col justify-between items-center;

    @screen xl {
      @apply flex-row;
    }
  }
2

This appears to be a stylelint linting error, see this issue with workaround (stylelint configuration):

2 Likes
3

Thank you for the reply. I was able to fix it now. the culprit was the ‘’@roots/bud-sass/stylelint-config’'. When I removed it, it works magically. I guess it conflicts with ‘@roots/bud-tailwindcss/stylelint-config’. Anyway, thank you very much for your time.

4

You were using this configuration set?

5

Yes, I just commented out the “‘@roots/bud-sass/stylelint-config’,” then it works!

it looks like this

extends: [
    '@roots/sage/stylelint-config',
    // '@roots/bud-sass/stylelint-config',
    '@roots/bud-tailwindcss/stylelint-config',
  ],
1 Like