Если вы читаете это, значит, у вас хороший вкус в CSS-фреймворках. В этом руководстве мы рассмотрим три основных метода интеграции TailwindCSS в ваши проекты Frontend и Full Stack Vanilla HTML.
Способ 1
Я называю это методом «ПОЦЕЛУЙ». Держать его просто глупо. На самом деле это настолько просто, что мы можем сделать это, добавив только следующую строку к тегу <head></head>
в обычном файле index.html
(или любом другом файле .html):
<script src="https://cdn.tailwindcss.com"></script>
Это буквально так просто! Однако есть и обратная сторона. Хотя вы можете получить большинство отличных утилит Tailwind, вы не получите их все. Ограничения могут варьироваться от уменьшенного цветового спектра до невозможности использования псевдоселекторов ::before
и ::after
.
Чтобы исправить такие проблемы, я предлагаю вам…
Способ 2
Метод 2 предоставит вам полную функциональность TailwindCSS, сохраняя при этом вашу кодовую базу небольшой и простой; идеально подходит только для разработки Frontend. И чтобы избавить меня от объяснений, Tailwind уже предвосхитил любопытство зрителей к таким методам, написав собственное краткое и ясное руководство по глубокому погружению в Tailwind с вашим проектом Vanilla HTML:
Это несомненно вершина опыта разработчиков, когда нужно работать с простым HTML и Tailwind, сводя к минимуму дополнительный багаж и установку.
Вам, вероятно, будет предложено установить «Create-vite», к чему я и приступлю. Далее для проекта Vanilla HTML вам необходимо выбрать:
- «ваниль» — для фреймворка.
- «ваниль» — для варианта.
- Finito, вуаля, и вы готовы установить Tailwind по приведенной выше ссылке.
Способ 3
Этот вариант использования предназначен для тех, кто любит создавать приложения Full Stack из основных и самых необходимых вещей. Примером такого может быть приложение Full Stack с серверной частью Node.js и Express и старым добрым сервером, отображающим Vanilla HTML и JS. Любое приложение за стеной входа в систему может быть подходящим кандидатом для таких приложений. Итак, как можно включить TailwindCSS в HTML-файлы, отображаемые на сервере? Для этого выполните следующие действия:
- Инициализируйте свой Node Server с помощью команды терминала:
$ npm init -y
. - Установите следующие пакеты:
$ npm i tailwindcss autoprefixer postcss postcss-cli express
. - Я также могу порекомендовать установить Nodemon для более удобной разработки с
$ npm i --save-dev nodemon
. - Запустите команду:
$ npx tailwindcss init
в корневом каталоге проекта. - Создайте файл конфигурации Postcss:
$ touch postcss.config.js
. - Создайте следующие папки и файлы:
$ mkdir public
.$ touch public/tailwind.css
.$ touch public/styles.css
.
Любой, созданный в большинстве наших файловых каталогов. Нам все еще нужно вставить следующий код в три наших файла:
postcss.config.js
module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ]}
tailwind.config.js
module.exports = { content: ["./public/**/*.{html,js}"], theme: { extend: {}, }, plugins: [] }
tailwind.css
@tailwind base; @tailwind components; @tailwind utilities;
Последний шаг
На последнем этапе нам нужно изменить следующие две строки в нашем файле package.json:
"tailwind:css": "postcss ./public/tailwind.css -o ./public/styles.css", "dev": "npm run tailwind:css && nodemon server.js"
Это будет компилировать TailwindCSS в наши файлы HTML всякий раз, когда мы запускаем наш файл Server/server.js с помощью команды $ npm run dev
. В итоге у нас должен получиться package.json, который выглядит следующим образом:
Точно так же мы можем импортировать таблицу стилей в выбранные нами HTML-файлы, используя следующий тег script в разделе <head></head>
наших страниц:
<link rel="stylesheet" href="styles.css" />
Законченный! Теперь у вас есть возможность использовать TailwindCSS в своем проекте Full Stack без необходимости использования каких-либо причудливых интерфейсных фреймворков.