Framework Guides

Руководства для конкретных платформ, в которых описывается рекомендуемый нами подход к установке Tailwind CSS в ряде популярных сред.

  • Next.js

    Полнофункциональный фреймворк React с большим опытом разработки.

  • Laravel

    Фреймворк веб-приложений PHP с выразительным элегантным синтаксисом.

  • Vite

    Быстрый и современный сервер разработки и инструмент сборки.

  • Nuxt.js

    Интуитивно понятный фреймворк Vue для создания универсальных приложений.

  • Gatsby

    Фреймворк для создания статических сайтов с React и GraphQL.

  • Create React App

    Инструмент командной строки для создания нового одностраничного приложения React.

  • SvelteKit

    Самый быстрый способ создавать приложения любого размера с помощью Svelte.js.

  • Angular

    Платформа для создания мобильных и настольных веб-приложений.

  • Ruby on Rails

    Фреймворк полного стека со всеми инструментами, необходимыми для создания удивительных веб-приложений.

  • Remix

    Фреймворк с полным стеком, ориентированный на основы веб-технологий и современный UX.

  • Phoenix

    Фреймворк для создания многофункциональных интерактивных приложений с помощью Elixir.

    Phoenix
  • Parcel

    Инструмент сборки с нулевой конфигурацией для Интернета.

    Parcel

Не видите выбранную вами схему? Вместо этого попробуйте использовать Tailwind CLI или установить Tailwind как плагин PostCSS .

Что читать дальше

Познакомьтесь с некоторыми из основных концепций, которые отличают Tailwind CSS от написания традиционного CSS.

  • Основы Utility-First

    Использование рабочего процесса «сначала утилиты» для создания сложных компонентов из ограниченного набора примитивных утилит.

  • Адаптивный дизайн

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

  • Наведение, фокус и другие состояния

    Стилизуйте элементы в интерактивных состояниях, таких как наведение, фокус и т. д., с помощью условных модификаторов.

  • Темный режим

    Оптимизируйте свой сайт для темного режима прямо в своем HTML с помощью модификатора темного режима.

  • Повторное использование стилей

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

  • Настройка фреймворка

    Настройте фреймворк в соответствии с вашим брендом и дополните его своими собственными стилями.