Домашняя страница Tailwind CSS
  1. Установка
  2. Установите Tailwind CSS c Phoenix

  1. Создайте свой проект

    Начните с создания нового проекта Phoenix, если он еще не настроен. Вы можете следовать их руководству по установке, чтобы приступить к работе.

    Terminal
    mix phx.new myprojectcd myproject

  2. Установите плагин Tailwind

    Добавьте подключаемый модуль Tailwind в свои зависимости и запустите mix deps.get, чтобы установить его.

    mix.exs
    defp deps do
  [
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end

  3. Настройте плагин Tailwind

    В файле config.exs вы можете указать, какую версию Tailwind CSS вы хотите использовать, путь к вашей конфигурации Tailwind и настроить пути к ресурсам.

    config.exs
    config :tailwind, version: "3.4.1", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]

  4. Обновите сценарий развертывания

    Настройте псевдоним assets.deploy, чтобы создать свой CSS при развертывании.

    mix.exs
    defp aliases do
  [
    setup: ["deps.get", "ecto.setup"],
    "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
    "ecto.reset": ["ecto.drop", "ecto.setup"],
    test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
end

  5. Включить наблюдатель(watcher ) в разработке

    Добавьте Tailwind в свой список наблюдателей в файле ./config/dev.exs.

    dev.exs
    watchers: [
  # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
  esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]

  6. Установите Tailwind CSS

    Запустите команду установки, чтобы загрузить автономный интерфейс командной строки Tailwind и создать файл tailwind.config.js в каталоге ./assets.

    Terminal
    mix tailwind.install

  7. Настройте пути к шаблону

    Добавьте пути ко всем файлам вашего шаблона в файл ./assets/tailwind.config.js .

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  8. Добавьте директивы Tailwind в свой CSS

    Добавьте директивы @tailwind для каждого слоя Tailwind в ./assets/css/app.css

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  9. Удалить импорт CSS по умолчанию

    Удалите импорт CSS из ./assets/js/app.js, так как теперь Tailwind сделает это за вас.

    app.js
    // Remove this line if you add your own CSS build pipeline (e.g postcss).
import "../css/app.css"

  10. Начните процесс сборки

    Запустите процесс сборки с помощью mix phx.server.

    Terminal
    mix phx.server

  11. Начните использовать Tailwind в своем проекте

    Начните использовать классы утилит Tailwind для оформления своего контента.

    index.html.heex
    <h1 class="text-3xl font-bold underline">
  Hello world!
</h1>