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

Я хочу использовать функцию применения 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, не работают.


vue.js css tailwind-css gridsome
person Kelvijn    schedule 01.08.2019    source источник
comment
Похоже, что с применением github.com/tailwindcss/custom- можно использовать только простые классы utitlity. forms / issues / 12   -  person Kelvijn    schedule 01.08.2019
comment
Так что bg-blue-500 тоже должен работать, но и эта ошибка тоже хмм ...   -  person Kelvijn    schedule 01.08.2019
comment
Другой вывод: bg_custom_color определен в tailwind.config, js не выдает ошибку и применяется стиль   -  person Kelvijn    schedule 01.08.2019
comment
Я могу использовать @apply как в main.css, так и в теге <style> в моих файлах vue. Мне нужно добавить @apply к каждому объявлению, чтобы избежать синтаксической ошибки в vscode, но это работает. Может проблема с конфигурацией?   -  person iAmBentley    schedule 08.08.2019

Ответы (2)


arrow_upward
1
arrow_downward

Из того, что я могу понять, похоже, есть несоответствие между задокументированным поведением 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;

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

CSS компилируется линейно, поэтому bg-blue-700 не существует для справки через apply, пока 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;
}

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

person Celeste Horgan    schedule 06.04.2020
comment
В ответе говорится, что компоненты следует ставить после утилит, но в коде указано иное. Я не мог внести изменения, чтобы исправить это. - person Sodj; 11.01.2021

arrow_upward
0
arrow_downward

Согласно документации, оберните его в @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;
    }
}
person Teddy McZieuwa    schedule 12.01.2021