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.

    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.

    defp deps do
        {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
  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 :tailwind, version: "3.4.4", default: [
      args: ~w(
      cd: Path.expand("../assets", __DIR__)
  4. Update your deployment script

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

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

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

    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.

    mix tailwind.install
  7. Configure your template paths

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

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
      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

    @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.

    // 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.

    mix phx.server
  11. Start using Tailwind in your project

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

    <h1 class="text-3xl font-bold underline">
      Hello world!