Как настроить Tailwind CSS

Во-первых,

Что такое Tailwind CSS?

Tailwind — это CSS Framework, созданный Адамом Ватаном.

В отличие от других фреймворков, он не поставляется со встроенными классами для добавления в HTML-теги.

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

Вы просто собираете вместе крошечные компоненты, чтобы создать уникальный пользовательский интерфейс.

** Tailwind просто берет необработанный файл CSS, обрабатывает его через файл конфигурации и выдает на выходе. **

Это действительно полезно при создании отзывчивых сложных дизайнов.

Узнайте больше на официальном сайте

Установка

Шаги —

  • Убедитесь, что в вашей системе установлен NodeJs. Если нет, скачайте его здесь.

  • Запишите следующие команды в терминале, открытом в определенном месте папки, где вы хотите использовать/установить его.

npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init -p
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Создайте CSS-файл, свяжите его с HTML-файлом и отредактируйте его с помощью приведенного ниже кода.
@tailwind base;
@tailwind components;
@tailwind utilities;
Войти в полноэкранный режим Выйти из полноэкранного режима
  • В файле «tailwind.config.js» замените «content:[]» на «content:[«*»]».

  • Добавьте/отредактируйте следующую строку JSON в файле «package.json».

"scripts": {
    "start": "vite";
}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Теперь, наконец, напишите следующее в терминале, чтобы запустить сервер разработки для запуска Tailwind CSS-.
npm run start
Войти в полноэкранный режим Выйти из полноэкранного режима

Куда теперь идти?

Теперь вы готовы приступить к работе с Tailwind CSS. Я нашел для вас несколько отличных ресурсов (последние 2022).

  1. Tailwind CSS Docs
  2. Pure Coding
  3. Raddy
  4. Traversy Media
  5. TechCode

Посмотрите мои заметки

Заметки

Оцените статью
Procodings.ru
Добавить комментарий