Блог

У меня установлен TailwindCSS 2.0 и плагин типографии. Я настроил свой стиль по умолчанию в конфигурации Tailwind, как это предлагается в документах. В моих настройках у меня есть стили для цвета текста и даже настройки для h2, h3 и т. Д., И все работает так, как ожидалось.

Тем не менее, я хотел бы иметь возможность время от времени изменять стили в классе .prose, добавляя классы непосредственно в теги. Например:

 <div class="prose">
<h2 class="text-red-400">Make this heading red even though the default configuration makes it grey.</h2>
</div>
 

Приведенный выше код, по-видимому, не влияет на изменение заголовка 2. Я думаю, потому что текст-красный-400 имеет меньшую специфику, поэтому он переопределяется стилями темы. Я хочу использовать прозу во многих местах на своем сайте, но также иногда допускаю настройки внутри класса прозы. Есть ли способ настроить это так, чтобы я мог это сделать?

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

 <div class="prose prose-red-h2">
  <h2>Make this heading red even though the default configuration makes it grey.</h2>
</div>
 

 const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      typography: {
        'red-h2': {
          css: {
            h2: {
              color: colors.red['600'],
            },
          },
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
}
 

Ссылка на игровую площадку: https://play.tailwindcss.com/4BywohSnz5

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