@apply из плагина попутного ветра Gridsome не работает

Question

Я хочу использовать функцию применения Tailwinds в моем проекте Gridsome. Но появляется ошибка, что классы css из попутного ветра не могут быть найдены.

Действия по воспроизведению:

1) Создать новый проект Gridsome

2) Установить плагин попутного ветра Github страница Npm страница

3) Создать файл CSS в папке активов и импортировать в main.js

import "~/assets/style.css"

4) Создать класс CSS в файле CSS

5) Используйте @apply в css с компонентом попутного ветра

Ничего не происходит... CSS-файл импортируется должным образом, потому что применяется нормальный CSS. Некоторые элементы, такие как закругленные, кажутся слишком работающими, но другие, такие как bg-blue-500, не работают.

Answer 1

Из того, что я могу понять, похоже, существует несоответствие между задокументированным поведением Tailwind и его фактическим поведением.

Согласно документации по извлечению компонентов с помощью@apply:

..Классы, подобные этому, следует добавлять сразу после директивы @tailwind components, чтобы избежать проблем со специфичностью.

На практике это приводит к style.css файл, который выглядит следующим образом:

@tailwind base;

@tailwind components;

// Note: you could also just add a custom CSS file here. 
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

@tailwind utilities;

В действительности, однако, это всегда вызывает ошибку сборки, и по вполне логичной причине. Попутный ветер вводитutilities файл с классами, производными от tailwind.config.js файл.

CSS компилируется линейно, поэтому bg-blue-700 не существует для справки через применить до utilities импортируется и читается.

Несмотря на то, что документация не рекомендует этого, перемещение классов компонентов после utilities устраняет ошибку компиляции:

@tailwind base;

@tailwind components;

@tailwind utilities;

// Note: you could also just add a custom CSS file here. 
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

Не идеально, но у меня это сработало.

Answer 2

Согласно документации , оберните его в компоненты @layers {}, чтобы предотвратить нежелательное поведение.

как это:

      @tailwind base;

@tailwind components;

@tailwind utilities;

@layers components {
    // Note: you could also just add a custom CSS file here. 
    .btn-blue {
      @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
    }
    .btn-blue:hover {
      @apply bg-blue-700;
    }
}