Tailwind CSS – это популярный инструмент для создания пользовательских интерфейсов, а Vite – это современный инструмент для сборки и разработки веб-приложений. Вместе они предоставляют мощную комбинацию для разработки веб-приложений. Давайте рассмотрим, как установить Tailwind с использованием Vite. Лично я столкнулся с определенными сложностями при установке tailwind css на свой компьютер по официальной документации, поэтому я нашел способ как быстро и легко подключить tailwind css – с помощью инструмента VITE. Данная статья является 2 частью и продолжением цикла статей по курсу tailwind css для начинающих, со статьей ознакомьтесь здесь.
О Vite
Vite – это современный, молниеносный инструмент сборки и сервер разработки для веб-приложений, созданный Эваном Ю, создателем Vue.js.
Используя мощь родных модулей ES, Vite предлагает исключительный опыт разработки с такими функциями, как мгновенная замена горячего модуля (HMR), эффективные производственные сборки и поддержка из коробки для различных фреймворков и библиотек.
Его величие заключается в его способности значительно ускорить процесс разработки, уменьшить накладные расходы на конфигурацию и обеспечить плавный, отзывчивый рабочий процесс. Улучшая производительность и улучшая опыт разработчика, Vite стал одним из самых популярных выборов для создания современных веб-приложений.
Но достаточно этой теории. Давайте проверим на практике, что на самом деле так здорово в Vite.
Шаг 1 – установите Node.js
Пропустите этот шаг, если у вас уже установлен Node.js.
Чтобы запустить Vite на вашем компьютере, вам нужен Node.js.
Чтобы установить его, перейдите на сайт Node.js и нажмите кнопку для его загрузки.
Там вы увидите 2 кнопки – LTS и Текущая (или Current). На самом деле не имеет значения, какую версию вы выберете, но чтобы просто не думать об этом, выберите версию (“Текущая”).
После загрузки запусти файл, прими условия и нажми кнопку “Далее”, пока установка не будет завершена.
После завершения установки вы можете увидеть окно терминала, как на скриншоте ниже. Нажмите любую кнопку, чтобы продолжить.
Теперь давайте проверим, была ли установка успешной. Запустите терминал (если вы используете Windows, введите “cmd” в системном поиске и запустите приложение Command Line / на MacOS ищите приложение “терминал”).
Затем введите node -v в терминале и нажмите Enter. Вы должны увидеть версию установленного программного обеспечения node.js, как на экране ниже (обратите внимание, что ваша версия может отличаться, так как с момента публикации этого руководства могло выйти обновление).
Шаг 2 – создайте новый проект
Для начала нам нужно создать новую папку и новый проект Vite, который мы поместим в эту папку.
Откройте терминал, перейдите к пути, где вы хотите разместить свой проект, и введите следующую команду:
npm create vite@latest te-vite
Затем выберите фреймворк Vanilla (чистый JavaScript) и вариант JavaScript.
В конце введите cd te-vite в терминале, чтобы перейти в папку с нашим новым проектом.
Ниже представлен скриншот из моего терминала. Как вы можете видеть, я сначала перешел на рабочий стол, а затем выполнил указанные выше шаги.
Шаг 3 – установите Tailwind CSS и его зависимости
Теперь скопируйте и вставьте следующие команды в терминал:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install -D tailwindcss postcss autoprefixer установит Tailwind и все необходимые зависимости.
npx tailwindcss init -p создаст файл tailwind.config.js.
Шаг 4 – обновите файл конфигурации Tailwind
Теперь откройте всю папку te-vite с редактором кода и найдите файл tailwind.config.js.
Замените все содержимое файла tailwind.config.js на этот код:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Шаг 5 – Обновите файл style.css
Далее нам нужно добавить необходимые директивы Tailwind в наш файл style.css, чтобы мы могли использовать классы Tailwind на вашем сайте.
Вы найдете файл style.css в корне нашего проекта.
Удалите весь код, который вы там найдете, и замените его следующим:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
@tailwind base;
@layer base {
html {
@apply text-neutral-800;
}
html.dark {
@apply text-neutral-50;
@apply bg-neutral-800;
}
}
@tailwind components;
@tailwind utilities;
Шаг 6 – Подключите файл style.css внутри index.html
Перейдите в файл index.html и перед закрывающим тегом </head> добавьте ссылку на файл style.css:
<head>
...
<link rel="stylesheet" href="style.css" />
</head>
Шаг 7 – проверка работы
Давайте посмотрим, правильно ли мы все настроили. Введите в терминал следующую команду:
npm run dev
После ввода этой команды Vite должен запустить локальный сервер на вашем компьютере и предоставить вам адрес, по которому вы можете увидеть ваше приложение.
В моем случае это следующий адрес: http://127.0.0.1:5173/
При переходе по данной ссылке вы должны увидеть ваше приложение, которое, честно говоря, выглядит немного сломанным. Давайте исправим это.
Шаг 8 – корректировка index.html
Перейдите в файл index.html и удалите следующую строку:
<div id="app"></div>
Замените ее следующим кодом и сохраните:
<div class="mx-auto mt-6 flex max-w-sm items-center space-x-4 rounded-xl bg-white p-6 shadow-lg">
<div class="shrink-0">
<img class="h-12 w-12" src="https://mdbootstrap.com/img/new/avatars/1.jpg" alt="ChitChat Logo" />
</div>
<div>
<div class="text-xl font-medium text-black">Wow, it works!</div>
<p class="text-slate-500">
This alert is built with Tailwind CSS classes
</p>
</div>
</div>
Если после сохранения файла в вашем браузере вы видите такую панель, это означает, что классы Tailwind работают, как они должны, и все было установлено правильно.
Заключение
Мы успешно прошли через ключевые этапы настройки Tailwind CSS для вашего проекта. Этот инструмент предоставляет мощные возможности для создания адаптивных и современных дизайнов без необходимости писать множество строк CSS кода. С помощью Tailwind, вы можете быстро и эффективно создавать красивые интерфейсы, опираясь на готовые утилиты и компоненты.
Не пропустите мою следующую статью, где мы погрузимся глубже в мир Tailwind CSS! Мы рассмотрим продвинутые компоненты, работу с плагинами и дадим советы по оптимизации вашего рабочего процесса. Если вы хотите довести свои навыки веб-дизайна до нового уровня, следующая статья будет именно для вас!