Tailwind Formatter

https://hexdocs.pm/tailwind_formatter/0.4.3
Admin
Tailwind Formatter is an opinionated mix format plugin for Elixir that sorts Tailwind CSS classes in...
Tokens:1,070
Snippets:18
Trust Score:9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Configure tailwind module in config.exs

Source: https://hexdocs.pm/tailwind_formatter

Example configuration for the tailwind module to support class extraction.

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

--------------------------------

### Configure .formatter.exs

Source: https://hexdocs.pm/tailwind_formatter

Register the plugin in your formatter configuration, ensuring it runs alongside Phoenix.LiveView.HTMLFormatter.

```elixir
  [
    plugins: [TailwindFormatter, Phoenix.LiveView.HTMLFormatter],
    inputs: [
      "*.{heex,ex,exs}",
      "priv/*/seeds.exs",
      "{config,lib,test}/**/*.{heex,ex,exs}"
    ],
    # ...
  ]
```

--------------------------------

### format(contents, opts)

Source: https://hexdocs.pm/tailwind_formatter

Callback implementation for Mix.Tasks.Format.format/2.

```APIDOC
## format(contents, opts)

### Description
Callback implementation for `Mix.Tasks.Format.format/2`.

### Parameters
- **contents** (string) - The content to be formatted.
- **opts** (any) - Formatting options.
```

--------------------------------

### features(opts)

Source: https://hexdocs.pm/tailwind_formatter

Callback implementation for Mix.Tasks.Format.features/1.

```APIDOC
## features(opts)

### Description
Callback implementation for `Mix.Tasks.Format.features/1`.

### Parameters
- **opts** (any) - Options passed to the features function.
```

--------------------------------

### Add dependency to mix.exs

Source: https://hexdocs.pm/tailwind_formatter

Include the tailwind_formatter package in your project dependencies.

```elixir
def deps do
  [
    {:tailwind_formatter, "~> 0.4.2", only: [:dev, :test], runtime: false}
  ]
end
```

--------------------------------

### Force recompile tailwind_formatter

Source: https://hexdocs.pm/tailwind_formatter

Command to force recompilation of the formatter to load custom classes.

```bash
❯ mix deps.compile tailwind_formatter --force
==> tailwind_formatter
Compiling 5 files (.ex)
Loading in /path/to/repo/_build/classes.txt.
Loading in /path/to/repo/_build/variants.txt.
Generated tailwind_formatter app
```

--------------------------------

### Configure tailwind.config.js for custom classes

Source: https://hexdocs.pm/tailwind_formatter

Append the extraction logic to your tailwind configuration to generate class and variant files.

```javascript
let { extract } = require("../deps/tailwind_formatter/assets/js")
extract(module.exports, "../_build")
```

--------------------------------

### Configure CI for Tailwind Formatter

Source: https://hexdocs.pm/tailwind_formatter

Use these steps in your CI pipeline to ensure Tailwind classes are correctly sorted before running the formatting check.

```yaml
- name: Generate classes.txt for tailwind
  run: mix tailwind default

- name: Compile tailwind_formatter plugin
   run: mix deps.compile tailwind_formatter --force

- name: Check code formatting
  run: mix format --check-formattedcopy
```
Tokens:
Raw