Tailwind CSS

MDX — это расширение формата Markdown, которое позволяет использовать JSX внутри Markdown-документов. Комбинация MDX и Tailwind CSS обеспечивает возможность создавать компоненты с богатым визуальным оформлением и гибкой стилизацией без необходимости писать отдельные CSS-файлы.

Для начала важно правильно настроить проект. Обычно используется Next.js или Vite с плагинами для поддержки MDX. Установка Tailwind CSS выполняется стандартным способом: через npm install tailwindcss postcss autoprefixer с последующей генерацией конфигурационных файлов tailwind.config.js и postcss.config.js.

Подключение Tailwind к MDX

MDX-файлы обрабатываются как JSX, поэтому классы Tailwind применяются напрямую к компонентам и HTML-элементам:

import { Button } from './components/Button'

# Пример использования Tailwind в MDX

<div className="bg-gray-100 p-6 rounded-lg shadow-md">
  <h1 className="text-2xl font-bold mb-4">Заголовок</h1>
  <p className="text-gray-700 mb-4">Текст с применением Tailwind CSS.</p>
  <Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Нажми меня
  </Button>
</div>

Обратите внимание, что все классы Tailwind работают напрямую в MDX, так как MDX компилируется в JSX.

Стилизация компонентов через Tailwind

MDX позволяет импортировать и использовать React-компоненты, а Tailwind CSS делает стилизацию компонентов декларативной. Рассмотрим несколько подходов:

1. Классы Tailwind напрямую в компоненте

export const Card = ({ title, content }) => (
  <div className="bg-white shadow-lg rounded-lg p-6 hover:shadow-xl transition-shadow">
    <h2 className="text-xl font-semibold mb-2">{title}</h2>
    <p className="text-gray-600">{content}</p>
  </div>
)

Этот подход прост и подходит для небольших компонентов.

2. Комбинация Tailwind с clsx или classnames

Для динамического применения стилей удобно использовать библиотеки clsx или classnames:

import clsx from 'clsx'

export const Alert = ({ type, message }) => {
  const alertClass = clsx(
    'p-4 rounded mb-4',
    type === 'error' && 'bg-red-100 text-red-800',
    type === 'success' && 'bg-green-100 text-green-800'
  )
  return <div className={alertClass}>{message}</div>
}

MDX позволяет импортировать этот компонент и использовать его с динамическими стилями:

<Alert type="error" message="Произошла ошибка!" />
<Alert type="success" message="Операция выполнена успешно!" />

Использование Tailwind в MDX с Layout-компонентами

MDX поддерживает возможность оборачивать весь контент в layout-компоненты. Это удобно для применения глобальных Tailwind-стилей:

// Layout.jsx
export const Layout = ({ children }) => (
  <div className="max-w-4xl mx-auto p-8">
    {children}
  </div>
)

В MDX:

import { Layout } from './Layout'

<Layout>
  <h1 className="text-3xl font-bold mb-6">Главный заголовок</h1>
  <p className="text-gray-700">Контент внутри layout-компонента с Tailwind.</p>
</Layout>

Такой подход обеспечивает консистентность стилей по всему сайту.

Настройка Tailwind для MDX с динамическими классами

Tailwind по умолчанию использует “purge” для удаления неиспользуемых классов. В MDX важно указать все пути к файлам .mdx в tailwind.config.js:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Это гарантирует, что все классы, используемые в MDX, будут присутствовать в итоговом CSS.

Анимации и интерактивность

Tailwind CSS включает утилиты для анимаций и трансформаций, которые можно использовать в MDX:

<div className="transform hover:scale-105 transition-transform duration-300">
  <p className="text-gray-800">Наведи на меня</p>
</div>

Также можно использовать Tailwind вместе с компонентами, имеющими состояние React:

export const Toggle = () => {
  const [on, setOn] = useState(false)
  return (
    <button
      className={`py-2 px-4 rounded ${on ? 'bg-green-500' : 'bg-gray-300'}`}
      onCl ick={() => setOn(!on)}
    >
      {on ? 'Вкл' : 'Выкл'}
    </button>
  )
}

MDX позволяет легко импортировать такой компонент и размещать интерактивные элементы прямо внутри Markdown-документа.

Применение Tailwind с плагинами MDX

Для сложных проектов используют плагины для расширенной поддержки MDX:

  • @mdx-js/loader — для сборки MDX с Webpack или Vite.
  • next-mdx-remote — для рендеринга MDX на сервере в Next.js.
  • rehype и remark плагины — для обработки контента и автоматического добавления классов Tailwind к элементам Markdown, например:
import rehypePreset from 'rehype-preset-minify'
import remarkGfm from 'remark-gfm'

const mdxOptions = {
  remarkPlugins: [remarkGfm],
  rehypePlugins: [rehypePreset],
}

Это позволяет применять Tailwind даже к стандартным Markdown-тегам (<h1>, <p>, <ul>), автоматически обогащая контент стилизованными классами.

Итоговые рекомендации

  • Использовать Tailwind на уровне компонентов для интерактивных и динамических элементов.
  • Для простых MDX-тегов применять глобальные классы через layout или через rehype плагины.
  • Следить за конфигурацией content в Tailwind, чтобы все классы из MDX попадали в итоговый CSS.
  • Комбинировать Tailwind с утилитами для динамических стилей (clsx, classnames) для максимально гибкой стилизации.

Такой подход обеспечивает полное использование возможностей MDX и Tailwind, позволяя создавать богатые, адаптивные и легко поддерживаемые интерфейсы прямо в Markdown-документах.

Оглавление