You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -82,13 +74,14 @@ directory, the OS environment, and default arguments to the
82
74
83
75
```elixir
84
76
config :tailwind,
85
-
version:"4.0.0",
77
+
version:"3.2.4",
86
78
default: [
87
79
args:~w(
88
-
--input=assets/css/app.css
89
-
--output=priv/static/assets/app.css
80
+
--config=tailwind.config.js
81
+
--input=css/app.css
82
+
--output=../priv/static/assets/app.css
90
83
),
91
-
cd:Path.expand("..", __DIR__)
84
+
cd:Path.expand("../assets", __DIR__)
92
85
]
93
86
```
94
87
@@ -99,18 +92,16 @@ to the ones configured above. Note profiles must be configured in your
99
92
100
93
## Adding to Phoenix
101
94
102
-
Note that applications generated with Phoenix older than 1.8 still use Tailwind v3 by default.
103
-
If 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)
104
-
instead.
95
+
To add `tailwind` to an application using Phoenix, you will need Phoenix v1.6+
96
+
and the following steps.
105
97
106
-
To add Tailwind v4 to an application using Phoenix, first add this package
107
-
as a dependency in your `mix.exs`:
98
+
First add it as a dependency in your `mix.exs`:
108
99
109
100
```elixir
110
101
defdepsdo
111
102
[
112
-
{:phoenix, "~> 1.7"},
113
-
{:tailwind, "~> 0.3", runtime:Mix.env() ==:dev}
103
+
{:phoenix, "~> 1.6"},
104
+
{:tailwind, "~> 0.1.8", runtime:Mix.env() ==:dev}
114
105
]
115
106
end
116
107
```
@@ -122,19 +113,21 @@ alias for deployments (with the `--minify` option):
2. Adjust the configuration to run Tailwind from the root of your repo (or the web app in an umbrella project):
194
-
195
-
```diff
196
-
config :tailwind,
197
-
- version: "3.4.13",
198
-
+ version: "4.0.0",
199
-
default: [
200
-
args: ~w(
201
-
- --config=tailwind.config.js
202
-
- --input=css/app.css
203
-
- --output=../priv/static/assets/app.css
204
-
+ --config=assets/tailwind.config.js
205
-
+ --input=assets/css/app.css
206
-
+ --output=priv/static/assets/app.css
207
-
),
208
-
- cd: Path.expand("../assets", __DIR__)
209
-
+ cd: Path.expand("..", __DIR__)
210
-
]
211
-
```
212
-
213
-
This allows Tailwind to automatically pick up classes from your project. Tailwind v4 does not require explicit configuration of sources.
214
-
215
-
3. Adjust the Tailwind imports in your app.css
216
-
217
-
```diff
218
-
-@import "tailwindcss/base";
219
-
-@import "tailwindcss/components";
220
-
-@import "tailwindcss/utilities";
221
-
+@import "tailwindcss";
222
-
```
223
-
224
-
4. Follow the [Tailwind v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) to address deprecations.
225
-
226
-
5. 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).
0 commit comments