Tailwind CSS — это “utility-first” (“полезность прежде всего”) CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения.
Данный гайд в первую очередь ориентирован на новичков, кто хочет расширить свой скил в верстке и добавить в свой арсенал данный фреймворк.
В отличие от Bootstrap, Tailwind не так то просто установить в свой проект как может показаться на первый взгляд. Да можно использовать CDN и вставить ссылку на свой проект.
Но используя такой метод вы теряете почти все те фишки ради которых стоит использовать Tailwind.
- Вы не можете настроить тему Tailwind по умолчанию
- Вы не можете использовать такие директивы@apply, как @variants, и т. д.
- Вы не можете включить дополнительные варианты, такие как group-focus
- Вы не можете устанавливать сторонние плагины
- Вы не можете встряхнуть дерево неиспользуемыми стилями
По этому крайне рекомендую устанавливать через npm, заодно и с консолью потренируетесь обращаться
Установка через npm
Перед установкой убедитесь что у Вас установлен NodeJS 12.13.0 или выше.
1. Запускаем терминал сочетанием клавиш windows + R:
2. Создаем директорию для своего будущего проекта, пишем в консоли
mkdir - (тут вы даете название своему проекту, например blogtailwind);
3. Переходим в созданную вами папку, пишем в консоли
cd blogtailwind/
4. Далее пишем npm init --yes. После выполнения данной команды будет создан файл package.json
5. Устанавливаем сам tailwind командой
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Установка может занять некоторое время.
6. Теперь открываем наш проект в каком нибудь редакторе кода
В открытом проекте создаем файл postcss.config.js открываем его и вставляем в него следующий код
7. Заходим опять в нашу консоль и пишем следующую команду
npx tailwindcss init - это создаст tailwind.config.js файл в корне вашего проекта
8. В проект создаем папку src и в ней styles.css. В styles.css подключаем в него следующие директивы
9. Далее нам понадобится установить CLI пакет
В консоле пишем npm install -D postcss-cli
10. Проверяем установленную версию
node_modules/.bin/postcss --version
Если видим эту надпись то все прошло удачно
11. Создаем компиляционный файл
Пишем в консоли node_modules/.bin/postcss src/style.css -o compiled.css
Возможно у Вас здесь будет следующая ошибка "Невозможно загрузить файл D:\SCRIPTS\sc.ps1, так как выполнение сценариев отключено в этой системе. Для получения дополнительных сведений см. about_Execution_Policies по адресу http://go.microsoft.com/fwlink/?LinkID=135170."
Лечится следующим способом:
- Открываем терминал от админа.
- Пишем и запускаем: Set-ExecutionPolicy RemoteSigned
- На вопрос отвечаем: A (Да для всех)
Запускаем команду еще раз node_modules/.bin/postcss src/style.css -o compiled.css
После чего файл compiled.css подключаем к нашей страничке через link.
Все можно работать!
Спасибо что проявили интерес к статье, если понравилась, то не поскупитесь на лайк и подписку на наш канал. Благодарим за внимание)
