-
Автор темы
- #1
Tailwind CSS - это, во-первых, прекрасный CSS-фреймворк, который облегчит вам front-end работу, благодаря своему однозначному свойству «utility-first» (Грубо говоря - это сугубо набор классов, из которых вы самостоятельно строите объекты html). Да, это удобно, да, это начинает пользоваться определенным спросом. Да, возможно, многие проекты будут переходить именно на фреймворки данного подмножества, так как это гораздо практичнее и менее затратно.
Давайте я сразу же объясню, что к чему и вообще о чем идет речь.
Перейдем к самому сетапу Tailwind. (Рассмотрим самый простой способ - с помощью node js.)
Давайте я сразу же объясню, что к чему и вообще о чем идет речь.
Большинство CSS-фреймворков имеют заранее заготовленные объекты, которые вы можете грубо использовать в разметке, например: Bootstrap предлагает нам задать стилизацию следующим топорным методом:
HTML:
<button type="button" class="btn btn-primary">Кнопка</button>С помощью Tailwind, мы можем сами задать все нужные параметры нашей кнопке. Или даже вывести отдельный стиль (Допустим, ".button"), который мы заполним с помощью доступных параметров. Пример:
О чем речь: Сайты, написанные на Tailwind не имеют, как таковой, однотипности, как это происходит с большинством фреймворков под CSS. Да, безусловно, любой фреймворк можно стилизовать до неотличимости. Но, тут вопрос уже в способности человека разумно мыслить.
HTML:
<button class="w-9 h-9 rounded-md text-gray-400 border border-gray-300">Кнопка</button>Перейдем к самому сетапу Tailwind. (Рассмотрим самый простой способ - с помощью node js.)
Создадим новую папку с названием "project"
Я пользуюсь VSC, да и всем советую. Удобство + аддоны + красота. Через терминал прописываем следующее:
Далее, нам понадобится создать папку, в которой мы создадим файл со стилями. К примеру: ( project/style/main.css )
Зачем: В целом, Tailwind работает так. У нас есть файл main.css, Tailwind берет его, прогоняет его через свою среду и выплевывает нам обработаный файл.
Далее, в данный файл со стилями нам нужно заинжектить сам Tailwind
В начало файла вставьте следующий код:
CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
Перейдем в файл: package.json
Необходимо найти поле "scripts" и прописать туда следующую команду:
Зачем: Данная команда как раз и будет "прогонять" наш файл со стилями через Tailwind-овскую среду.
Готово, теперь прописываем как раз наш прогон с помощью npx:
Если вы все правильно сделали, у вас должна была появиться папка template -> css и внутри нее файл со стилями main.css (уже обработаный)
Готово, можете заглянуть в
Пожалуйста, авторизуйтесь для просмотра ссылки.
, там расписаны все готовые стили. Начало положено.Автор: @dhorman
Последнее редактирование:
