TailwindCSS и Alpine

Перейдите в нужную папку, где можем развернуть проект. Начнем с создания файла package.json:

npm init -y

Помимо инициации файла package.json, установим модуль Parcel.

npm i --save-dev parcel@nightly

Далее настроим PostCSS и TailwindCSS. PostCSS и TailwindSS являются обязательными, как и autoprefixer.

npm i --save-dev autoprefixer tailwindcss postcss
npx tailwindcss init

Последний шаг scallfolds создает файл конфигурации для Tailwind CSS, который можно использовать для настройки различных свойств .

Далее нам нужно создать файл /.postcssrc для настройки PostCSS на использование autoprefixed и Tailwind CSS. Просто вставьте следующее в файл:

{
 "plugins": {
  "tailwindcss": {},
  "autoprefixer": {}
 }
}

Этого файла достаточно, чтобы Parcel мог запустить CSS-файлы через PostCSS и применить плагины Tailwind и autoprefixer.

Далее создайте файл /css/tailwind.css и вставьте следующее:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Мы будем использовать это для импорта Tailwind в проект. Для этого создайте /app.js и вставьте это:

import "./css/tailwind.css";

Теперь необходимо создать файл index.html где можем подключить данный скрипт.

С помощью тега script Parcel автоматически найдет и построит наш JS-файл.

Внесем изменения в файл package.json.

  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },

Эти скрипты сообщают Parcel, что нужно использовать файл index.html в качестве точки входа для нашего приложения.

На этом этапе Tailwind CSS должен быть настроен и готов к работе. Вы можете проверить это, запустив > npm run start и посетив http://localhost:1234 . Вы должны увидеть свою html-страницу с подключенными TailwindCSS.

Теперь добавим AlpineJS

npm i alpinejs

Внесем изменения в файл app.js:

import "./css/tailwind.css";
import "alpinejs";

Это всё. Теперь к странице подключены TailwindCSS и AlpineJS

Для запуска проекта можно воспользоваться командами:

npm run start
//или
npm run build