Блог

Главная - Вопросы по программированию - Как вы можете импортировать в CSS с помощью tailwind css?

Как вы можете импортировать в CSS с помощью tailwind css?

#tailwind-css

Вопрос:

Только что начал использовать tailwindcss в Next.js проект.

Я настроил его через свой CSS-файл и пытался настроить некоторые основы для заголовков h1 , h2 , … но мне нравится немного разделять логику, чтобы она не была слишком запутанной, поэтому я попытался `@import ‘./typography.css’ который включает в себя некоторый tailwind, но он неработа.

Вот мой базовый файл CSS:

 @tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@import './typography.css';

Моя типография:

 h1 {
    @apply text-6xl font-normal leading-normal mt-0 mb-2;
}
...

Есть идеи о том, как я могу заставить это работать?

Обновить

Я пробовал:

  • Добавлен @layer base в мой файл typography.css, но выдает ошибку: Syntax error: /typography.css "@layer base" is used but no matching @tailwind base
  • Также пытался сделать это на уровне импорта, например @layer base { @import("typography.css") } , это не создает ошибки, но стили не применяются.

Ответ №1:

Для этого вам нужно установить целевой слой. Поскольку вы хотите изменить базовые элементы html в своем typography.css файле, выполните:

 @layer base {
    h1 {
        @apply text-6xl font-normal leading-normal mt-0 mb-2;
    }
}

Более подробная информация в документации здесь: https://tailwindcss.com/docs/adding-base-styles

Комментарии:

1. Итак, я поместил @layer base {... } в свой файл typography.css, и теперь я получаю эту ошибку: Syntax error: /typography.css "@layer base" is used but no matching @tailwind base`присутствует директива.`

2. PS Я также пытался сделать @layer base { @import("typography.css") } , что не создает ошибки, но не применяет стиль.

Ответ №2:

Вы должны использовать postcss-import

https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files

https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

если вы используете Laravel webpack mix, добавьте его в .postCss(....) 

 .postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'), // <------------ add postcss-import here
    require('tailwindcss'),
])

Ответ №3:

  1. используемые poscss и postcss-импорт-плагин импорт плагина

    установка npm -D postcss-импорт

  1. обновить postcss.config.js файл

    module.exports = { плагины: { ‘postcss-импорт’: {}, tailwindcss: {}, } }

  2. добавьте внутреннюю часть вашего @tailwind base; typography.css

для получения дополнительной информации вы можете проверить эту ссылку: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

Метки: ,