Всю информацию беру в основном из ютуб канала - https://www.youtube.com/@DaveGrayTeachesCode
Начинаем с установки
Visual Studio Code - https://code.visualstudio.com/download
Node package manager - https://www.npmjs.com/
Tailwind CSS - https://tailwindcss.com/
В VS code устанавливаем Live Server, где в настройках добавляем галочку на Full reload
Обращаем внимание какая тема виндовс у вас установлена: Темная или Светлая. Будущий сайт построеный с помощью TailWind может учитывать эти настройки. (Пуск - Настройки - Персонализация - Цвета)
@apply ошибка при сохранении. Лишние пробелы. Автоматическое форматирование CSS
При работе с Tailwind CSS могут возникать ошибки. Например, когда применяете @apply, то при сохранении файла могу произойти автоматическое форматирование документа, такое как пробелы, которые Tailwind считает за ошибку.
Что бы их убрать эту ошибку нужно в настройка Visual Studio Code прописать в поиске CSS Format. И убрать галочку с CSS Format Enable
Для перфекционистов
Например, в файле input.css есть предупреждение
"message": "Unknown at rule @tailwind"
и тому подобного. Для устранения данного предуприждения нужно зайти в настройки, в поиске написать unknown и в настройках CSS> lint: Unknovn At Rules выбрать ignore
Добавления Радиального градиента в Tailwind CSS
В Tailwind не предусмотрено радиальный градиент, только линейный. Но можно добавить свой стиль.
Открываем файл input.css и создаем свой стиль:
.radial-blue {
background: radial-gradient(lightyellow, skyblue);
}
И прописываем это свойство прямо в классе
<body class="radial-blue">
Inline fold
Это плагин для VS code - для удобства чтения кода. Как известно, при верстке страницы с помощью Tailwind CSS, в элементе классов может быть такое количество, что не вмещееться в экран. Для этого и предназначен этот плагин. Он заменяет на три точки все классы. А при необходимости вы можете кликнуть на эти три точки и раскрыть классы.
Prettier-plugin-tailwindcss
Этот плагин "расчесывает" ваши стили. Вы можете писать свойства классов как угодно, в любой последовательности. Этот плагин расставит все свойства в нужно порядке.
В терминале прописываем:
npm i -D prettier-plugin-tailwindcss
После установки данного плагина в терминале, нужно запустить команду
"prettier": "npx prettier --write **/*.html"
Эту команду можно прописать в И всё. Все файлы будут приведены в порядок
Создаем проект. Последовательность
В терминале пишем:
npx tailwindcss init
В созданном файле tailwind.config.js заполняем массив content:
content: ["./build/*.html", "./build/js/script.js/"],
В корне создаем две папки: /build/index.html и /src
Далее в терминале написать:
npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch
Это для создания файла style.css
В файле index.html добавляем тег link с необходимым путем к файлу.
Создаем файл package.json. Для этого в терминале пишем:
npm init -y
В файле package.json в разделе scripts пишем две строки:
"scripts":{
"tailwind": "npx tailwindcss -i ./src/input.css -o ./build/css/scrypt.css --watch",
"prettier": "npx prettier --write **/*.html"
},
В корне каталоге создаем файл .gitignore, в котором пише одну строку node_modules
Комментарии
Отправить комментарий