Как создать компоненты темы в Tailwind - PullRequest
Новая
       27

Как создать компоненты темы в Tailwind

1 голос
/ 17 июня 2019

Я интегрирую Tailwind в существующий проект, который в настоящее время использует Bootstrap.В настоящее время кодовая база поддерживает два разных сайта с разными темами.Я изо всех сил пытаюсь найти идиоматический способ предоставления тематических стилей, специфичных для отдельных компонентов , в отличие от более общего тематического оформления, которое, очевидно, уже хорошо поддерживается Tailwind.

Например,Чтобы стилизовать компонент панели навигации с разными цветами фона для обеих тем, я просто добавляю в конфигурацию моей темы поле для каждого сайта, содержащее стили, специфичные для этого компонента, и добавляю эти стили с помощью плагина.

Таким образом, мой конфигурационный файл может содержать что-то вроде этого: 

const theme = process.env.SITE_THEME;

const darkTheme = {
  navbar: {
    'bg-color': '#333333',
    'text-color': '#F3F3F9',
    'border-color': '#000000'
  }
};

// const lightTheme = ...

module.exports = {
  theme: Object.assign({}, commonTheme, getThemeConfiguration(theme)),
  variants: {},
  plugins: [
    function ({ addComponents, theme }) {
      addComponents([{
        '.navbar': {
          height: '50px',
          border: `2px solid ${theme('navbar.border-color')}`,
          color: theme('navbar.text-color'),
          backgroundColor: theme('navbar.bg-color'),
        }
      }])
    }
  ]
};

Это хорошо , но он кажется немного громоздким из-за необходимого количества шаблонов, так как добавляется все больше и больше компонентовчерез некоторое время.Мне интересно, есть ли более канонический способ сделать это?

Очевидно, было бы неплохо иметь стандартную тему цветов для использования и выбора из них в плагине компонентов, но это не совсем жизнеспособно дляэтот вариант использования, так как я надеюсь минимизировать изменения стиля.

...