Если вы читаете это, значит, у вас хороший вкус в 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 вам необходимо выбрать:

  1. «ваниль» — для фреймворка.
  2. «ваниль» — для варианта.
  3. Finito, вуаля, и вы готовы установить Tailwind по приведенной выше ссылке.

Способ 3

Этот вариант использования предназначен для тех, кто любит создавать приложения Full Stack из основных и самых необходимых вещей. Примером такого может быть приложение Full Stack с серверной частью Node.js и Express и старым добрым сервером, отображающим Vanilla HTML и JS. Любое приложение за стеной входа в систему может быть подходящим кандидатом для таких приложений. Итак, как можно включить TailwindCSS в HTML-файлы, отображаемые на сервере? Для этого выполните следующие действия:

  1. Инициализируйте свой Node Server с помощью команды терминала: $ npm init -y.
  2. Установите следующие пакеты: $ npm i tailwindcss autoprefixer postcss postcss-cli express.
  3. Я также могу порекомендовать установить Nodemon для более удобной разработки с $ npm i --save-dev nodemon.
  4. Запустите команду: $ npx tailwindcss init в корневом каталоге проекта.
  5. Создайте файл конфигурации Postcss: $ touch postcss.config.js.
  6. Создайте следующие папки и файлы:
  7. $ mkdir public.
  8. $ touch public/tailwind.css.
  9. $ 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 без необходимости использования каких-либо причудливых интерфейсных фреймворков.