{"id":28456274,"url":"https://github.com/phoenixframework/tailwind","last_synced_at":"2025-06-29T10:32:10.972Z","repository":{"id":37037319,"uuid":"440319851","full_name":"phoenixframework/tailwind","owner":"phoenixframework","description":"An installer for tailwind","archived":false,"fork":false,"pushed_at":"2025-06-21T09:53:57.000Z","size":109,"stargazers_count":495,"open_issues_count":13,"forks_count":72,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-06-25T15:51:34.468Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phoenixframework.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-20T22:10:48.000Z","updated_at":"2025-06-23T19:15:55.000Z","dependencies_parsed_at":"2023-02-10T04:01:27.228Z","dependency_job_id":"6fc9eea4-f617-4244-a86f-0a077d4dd8b4","html_url":"https://github.com/phoenixframework/tailwind","commit_stats":{"total_commits":63,"total_committers":26,"mean_commits":2.423076923076923,"dds":0.6190476190476191,"last_synced_commit":"328a261aad834f35251f91cb4dd1da3b4f614ac9"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/phoenixframework/tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Ftailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Ftailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Ftailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Ftailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phoenixframework","download_url":"https://codeload.github.com/phoenixframework/tailwind/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phoenixframework%2Ftailwind/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261937078,"owners_count":23232852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-06T23:07:32.572Z","updated_at":"2025-06-29T10:32:10.963Z","avatar_url":"https://github.com/phoenixframework.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind\n\n[![CI](https://github.com/phoenixframework/tailwind/actions/workflows/main.yml/badge.svg)](https://github.com/phoenixframework/tailwind/actions/workflows/main.yml)\n\nMix tasks for installing and invoking [tailwindcss](https://tailwindcss.com) via the\nstand-alone [tailwindcss cli](https://github.com/tailwindlabs/tailwindcss/tree/master/standalone-cli)\n\n_Note_: The stand-alone Tailwind client bundles first-class Tailwind packages\nwithin the precompiled executable. For third-party Tailwind plugin support (e.g. DaisyUI),\nthe node package must be used. See the [Tailwind Node.js installation instructions](https://tailwindcss.com/docs/installation)\nif you require third-party plugin support.\n\n## Installation\n\nIf you are going to build assets in production, then you add\n`tailwind` as dependency on all environments but only start it\nin dev:\n\n```elixir\ndef deps do\n  [\n    {:tailwind, \"~\u003e 0.3\", runtime: Mix.env() == :dev}\n  ]\nend\n```\n\nHowever, if your assets are precompiled during development,\nthen it only needs to be a dev dependency:\n\n```elixir\ndef deps do\n  [\n    {:tailwind, \"~\u003e 0.3\", only: :dev}\n  ]\nend\n```\n\nOnce installed, change your `config/config.exs` to pick your\nTailwind version of choice:\n\n```elixir\nconfig :tailwind, version: \"4.0.9\"\n```\n\nNote that `:tailwind` 0.3+ assumes Tailwind v4+ by default. It still supports Tailwind v3, but some configuration options when setting up a new\nproject might be different. If you use Tailwind v3, also have a look at [the README in the 0.2 branch](https://github.com/phoenixframework/tailwind/blob/v0.2/README.md).\n\nNow you can install Tailwind by running:\n\n```bash\n$ mix tailwind.install\n```\n\nor if your platform isn't officially supported by Tailwind,\nyou can supply a third party path to the binary the installer wants\n(beware that we cannot guarantee the compatibility of any third party executable):\n\n```bash\n$ mix tailwind.install https://people.freebsd.org/~dch/pub/tailwind/v3.2.6/tailwindcss-freebsd-x64\n```\n\nAnd invoke Tailwind with:\n\n```bash\n$ mix tailwind default\n```\n\nThe executable is kept at `_build/tailwind-TARGET`.\nWhere `TARGET` is your system target architecture.\n\n## Profiles\n\nThe first argument to `tailwind` is the execution profile.\nYou can define multiple execution profiles with the current\ndirectory, the OS environment, and default arguments to the\n`tailwind` task:\n\n```elixir\nconfig :tailwind,\n  version: \"4.0.9\",\n  default: [\n    args: ~w(\n      --input=assets/css/app.css\n      --output=priv/static/assets/app.css\n    ),\n    cd: Path.expand(\"..\", __DIR__)\n  ]\n```\n\nWhen `mix tailwind default` is invoked, the task arguments will be appended\nto the ones configured above. Note profiles must be configured in your\n`config/config.exs`, as `tailwind` runs without starting your application\n(and therefore it won't pick settings in `config/runtime.exs`).\n\n## Adding to Phoenix\n\nNote that applications generated with Phoenix older than 1.8 still use Tailwind v3 by default.\nIf you're using Tailwind v3 please refer to [the README in the v0.2 branch](https://github.com/phoenixframework/tailwind/blob/v0.2/README.md#adding-to-phoenix)\ninstead.\n\nTo add Tailwind v4 to an application using Phoenix, first add this package\nas a dependency in your `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:phoenix, \"~\u003e 1.7\"},\n    {:tailwind, \"~\u003e 0.3\", runtime: Mix.env() == :dev}\n  ]\nend\n```\n\nAlso, in `mix.exs`, add `tailwind` to the `assets.deploy`\nalias for deployments (with the `--minify` option):\n\n```elixir\n\"assets.deploy\": [\"tailwind default --minify\", ..., \"phx.digest\"]\n```\n\nNow let's change `config/config.exs` to tell `tailwind`\nto build our css bundle into `priv/static/assets`.\nWe'll also give it our `assets/css/app.css` as our css entry point:\n\n```elixir\nconfig :tailwind,\n  version: \"4.0.9\",\n  default: [\n    args: ~w(\n      --input=assets/css/app.css\n      --output=priv/static/assets/app.css\n    ),\n    cd: Path.expand(\"..\", __DIR__)\n  ]\n```\n\n\u003e Make sure the \"assets\" directory from priv/static is listed in the\n\u003e :only option for Plug.Static in your lib/my_app_web/endpoint.ex\n\nIf your Phoenix application is using an umbrella structure, you should specify\nthe web application's asset directory in the configuration:\n\n```elixir\nconfig :tailwind,\n  version: \"4.0.9\",\n  default: [\n    args: ...,\n    cd: Path.expand(\"../apps/\u003cfolder_ending_with_web\u003e\", __DIR__)\n  ]\n```\n\nFor development, we want to enable watch mode. So find the `watchers`\nconfiguration in your `config/dev.exs` and add:\n\n```elixir\n  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}\n```\n\nNote we are enabling the file system watcher.\n\nFinally, run the command:\n\n```bash\n$ mix tailwind.install\n```\n\nThis command installs Tailwind and  updates your `assets/css/app.css`\nand `assets/js/app.js` with the necessary changes to start using Tailwind\nright away. See `mix help tailwind.install` to learn more.\n\n## Updating from Tailwind v3 to v4\n\nFor a typical Phoenix application, updating from Tailwind v3 to v4 requires the following steps:\n\n1.  Update the `:tailwind` library to version 0.3+\n\n    ```diff\n     defp deps do\n       [\n    -    {:tailwind, \"~\u003e 0.2\", runtime: Mix.env() == :dev},\n    +    {:tailwind, \"~\u003e 0.3\", runtime: Mix.env() == :dev},\n       ]\n     end\n    ```\n\n2.  Adjust the configuration to run Tailwind from the root of your repo (or the web app in an umbrella project):\n\n    ```diff\n     config :tailwind,\n    -   version: \"3.4.13\",\n    +   version: \"4.0.9\",\n        default: [\n          args: ~w(\n    -       --config=tailwind.config.js\n    -       --input=css/app.css\n    -       --output=../priv/static/assets/app.css\n    +       --input=assets/css/app.css\n    +       --output=priv/static/assets/app.css\n         ),\n    -    cd: Path.expand(\"../assets\", __DIR__)\n    +    cd: Path.expand(\"..\", __DIR__)\n      ]\n    ```\n\n    This allows Tailwind to automatically pick up classes from your project. Tailwind v4 does not require explicit configuration of sources.\n\n3.  Adjust the Tailwind imports in your app.css\n\n    ```diff\n    -@import \"tailwindcss/base\";\n    -@import \"tailwindcss/components\";\n    -@import \"tailwindcss/utilities\";\n    +@import \"tailwindcss\";\n    ```\n\n4.  Follow the [Tailwind v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) to address deprecations.\n\n5.  Optional: remove the `tailwind.config.js` and switch to the new CSS based configuration. For more information, see the previously mentioned upgrade guide and the [documentation on functions and directives](https://tailwindcss.com/docs/functions-and-directives).\n\n## License\n\nCopyright (c) 2022 Chris McCord.\nCopyright (c) 2021 Wojtek Mach, José Valim.\n\ntailwind source code is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphoenixframework%2Ftailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphoenixframework%2Ftailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphoenixframework%2Ftailwind/lists"}