Здесь мы установим tailwindcss и попрактикуемся. Предварительно есть некоторые вещи, которые мы должны подготовить в требованиях к программному обеспечению.

  1. Веб-браузер: Google Chrome (можно использовать другой)
  2. Редактор кода: Visual Studio Code (который я использую)
  3. Расширение VSCode:
    › Tailwind CSS IntelliSensi
  4. Менеджер пакетов: NPM (Node.js)
  5. Терминал: Powershell, Git Bash,…..

примечания: есть несколько типов, которые мы можем использовать для установки tailwindcss

I. Попутный ветер CLI

II. Использование PostCSS

III. Руководство по каркасу

IV. Воспроизвести CDN

мы собираемся использовать шаги I, II, II

Перейдём непосредственно к делу

А. Установите Tailwind CSS

открываем наш текстовый редактор (здесь я использую vite + react) и открываем терминал

  1. Установите tailwindcss и его одноранговые зависимости через npm и создайте файл tailwind.config.js.

примечания:

› я = установить

› -D = мы сохраняем попутный ветер в разработке зависимостей, если мы этого не делаем -D также попутный ветер все еще работает, но из самого попутного ветра (в Интернете) рекомендуется использовать - Д

› Если мы используем CLI tailwind при установке только до tailwindcss

npm install -D tailwindcss

Добавьте tailwindcss и autoprefixer в файл postcss.config.js или туда, где PostCSS настроен в вашем проекте.

2. Создан файл конфигурации Tailwind CSS: tailwind.config.cjs
Создан файл конфигурации PostCSS: postcss.config.cjs

3. Добавьте пути ко всем файлам вашего шаблона в файл tailwind.config.js.

4. Добавьте директивы @tailwind для каждого из слоев Tailwind в ваш основной файл CSS.

примечания: три слоя попутного ветра

›. База @tailwind: сбросить все стили, которые дает браузер.

›. Компоненты @tailwind: tailwind запросит компоненты в библиотеке, такие как контейнер, система сетки и т. д.

›. Утилиты @tailwind: tailwind запросит прямые утилиты, ну, это класс утилиты, который мы будем использовать позже.

›. если у вас есть другая конфигурация или вы делаете ее сами, вы можете сохранить ее здесь (index.css)

5. Запустите процесс сборки с помощью npm run dev или любой другой команды, настроенной в вашем файле package.json.

npm run dev

Loading....

and klick O

примечания: если мы используем CLI, сделайте это

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

"=" npx tailwind -I (выполнение попутного ветра), =› ./src/input.css -o (с каким вводом), =› ./dist/output.css (тогда дайте вывод какой именно), =› - -watch ( как раз вовремя) / (любое изменение называется попутным ветром)

6. попробуем и увидим разницу

Более подробно их можно посмотреть здесь.

Не рекомендуется использовать CDN

Use the Play CDN to try Tailwind right in the browser without any build step.
The Play CDN is designed for development purposes only, and is not the best 
choice for production.

Более подробно их можно посмотреть здесь.