Tailwind CSS home page
  1. Installation
  2. Install Tailwind CSS with Phoenix

  1. Create your project

    Start by creating a new Phoenix project if you don't have one set up already. You can follow their installation guide to get up and running.

    Terminal
    mix phx.new myprojectcd myproject

  2. Install the Tailwind plugin

    Add the Tailwind plugin to your dependencies and run mix deps.get to install it.

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

  3. Configure the Tailwind plugin

    In your config.exs file you can set which version of Tailwind CSS you want to use, the path to your Tailwind config, and customize your asset paths.

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

  4. Update your deployment script

    Configure your assets.deploy alias to build your CSS on deployment.

    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. Enable watcher in development

    Add Tailwind to your list of watchers in your ./config/dev.exs file.

    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. Install Tailwind CSS

    Run the install command to download the standalone Tailwind CLI and generate a tailwind.config.js file in the ./assets directory.

    Terminal
    mix tailwind.install

  7. Configure your template paths

    Add the paths to all of your template files in your ./assets/tailwind.config.js file.

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

  8. Add the Tailwind directives to your CSS

    Add the @tailwind directives for each of Tailwind’s layers to ./assets/css/app.css

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

  9. Remove the default CSS import

    Remove the CSS import from ./assets/js/app.js, as Tailwind is now handling this for you.

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

  10. Start your build process

    Run your build process with mix phx.server.

    Terminal
    mix phx.server

  11. Start using Tailwind in your project

    Start using Tailwind’s utility classes to style your content.

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