Блог

Я пытаюсь включить tailwindcss в свою пользовательскую тему Gatsby через twin.macro . Я использую рабочие пространства yarn, а дерево каталогов проекта настроено следующим образом:

 ./site - The actual site which contains the content
./packages/gatsby-theme-custom/** - The Gatsby theme
 

Итак, my site извлекает gatsby-theme-custom и заполняет его собственным содержимым.

Интеграция tailwindcss per se до сих пор работала нормально. Теперь я пытаюсь добавить tailwind.config.js файл в корень gatsby-theme-custom , но, похоже, файл не извлекается во время компиляции. Например, я пытался расширить базовую тему некоторыми пользовательскими цветами:

 module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        electric: "#db00ff",
        ribbon: "#0047ff",
        wonderfulgray: "#eeeeee",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

 

Затем в каком-то файле внутри темы:

 import tw from "twin.macro";

...


return (
 <div
      css={[
        tw`flex flex-col items-center justify-center h-screen`,
        tw`bg-gradient-to-b from-electric to-wonderfulgray`,
      ]}
    >
    Test
 </div>

)
 

Когда я сейчас компилирую сайт, я получаю ошибки, связанные с тем, что указанные цвета не могут быть найдены.

 ✕ from-electric was not found
 

Когда я помещаю файл конфигурации в корень site , все работает нормально. Проблема сейчас в том, что сайт в принципе ничего не должен знать о стилизации. Все, что связано со стилем, должно быть инкапсулировано в тему. Есть ли способ добиться того, чтобы tailwind вместо этого получал конфигурационный файл из темы? Или я допустил какие-то ошибки на этом пути?

Любая помощь приветствуется!

Я только что нашел ответ. Можно twin.macro указать путь к конфигурационному файлу tailwindcss.

Я добавил babel-plugin-macros.config.js файл в корень gatsby-theme-custom каталога. Во-вторых, я tailwind.config.js также добавил в корневой каталог темы.

Содержимое babel-plugin-macros.config.js файла выглядит следующим образом:

 // babel-plugin-macros.config.js
module.exports = {
  twin: {
    config: `${__dirname}/tailwind.config.js`,
    preset: "styled-components",
  },
};

 

${__dirname} здесь важно выбрать корень Gatsby-theme-custom каталога.

С такой конфигурацией можно было поместить конфигурационный файл tailwind в каталог темы и инкапсулировать его из site каталога.

Альтернативный подход к обработке tailwind.config.js в теме Gatsby требуется указать пользовательский путь к файлу в настройках плагина для gatsby-plugin-postcss .

В gatsby-config.js:

 plugins: [
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          require("postcss-import"),
          require("tailwindcss")({ config: `${__dirname}/tailwind.config.js` }),
          require("postcss-preset-env")({ stage: 1 }),
        ],
      },
    },
 

Источник: комментарий tiggeymone на Github

Удобная особенность этого подхода заключается в том, что вы можете разрешить сайтам, использующим тему, по желанию предоставлять свои собственные tailwind.config.js файл, перейдя postCssPlugins к теме через параметры темы.