Директива Tailwind @apply не работает на Nuxt - PullRequest
Новая
       40

Директива Tailwind @apply не работает на Nuxt

0 голосов
/ 24 апреля 2020

Я пытаюсь использовать Tailwind в моем новом проекте, все утилиты ie работают нормально, но @apply не может даже скомпилировать.

Вот сообщение об ошибке: 

Syntax Error: SyntaxError                                                                                                                                                                                                                                       friendly-errors 08:12:30

(5:5) `@apply` cannot be used with `.lg\:mt-0` because `.lg\:mt-0` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.lg\:mt-0` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  3 | @import 'tailwindcss/components';
  4 | .navbar-item-link {
> 5 |     @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;
    |     ^
  6 | }
  7 | /* purgecss end ignore */

Мой попутный ветер. css файл: 

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
.navbar-item-link {
    @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;
}
/* purgecss end ignore */

@import 'tailwindcss/utilities';

Я уже установил пост css cli и использую пост css .config. js примерно так: 

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer")
  ]
};

Но ничего из этого не работает.

1 Ответ

0 голосов
/ 24 апреля 2020

Нельзя использовать префикс псевдоклассов с методом @apply

Вместо этого 

.navbar-item-link {
    @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;
}

Вы должны использовать что-то вроде этого: 

// Normal State
.navbar-item-link {
    @apply text-xs mt-1 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100;
}

// Hover State
navbar-item-link:hover{
    @apply border-blue-best-100;
}

// Large Screen
@screen lg {
    .navbar-item-link{
        @apply mt-0;
    }
}

Вот больше информации об этом

https://tailwindcss.com/docs/extracting-components/#extracting - css -компоненты с применением

https://tailwindcss.com/docs/functions-and-directives/#screen

...