Skip to content

Commit 44ac901

Browse files
committed
don't mention 0.3 or Tailwind v4 in README yet
1 parent 8ad425c commit 44ac901

File tree

1 file changed

+27
-84
lines changed

1 file changed

+27
-84
lines changed

README.md

Lines changed: 27 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ in dev:
1919
```elixir
2020
def deps do
2121
[
22-
{:tailwind, "~> 0.3", runtime: Mix.env() == :dev}
22+
{:tailwind, "~> 0.2", runtime: Mix.env() == :dev}
2323
]
2424
end
2525
```
@@ -30,27 +30,19 @@ then it only needs to be a dev dependency:
3030
```elixir
3131
def deps do
3232
[
33-
{:tailwind, "~> 0.3", only: :dev}
33+
{:tailwind, "~> 0.2", only: :dev}
3434
]
3535
end
3636
```
3737

3838
Once installed, change your `config/config.exs` to pick your
39-
Tailwind version of choice:
39+
tailwind version of choice:
4040

4141
```elixir
42-
config :tailwind, version: "4.0.0"
42+
config :tailwind, version: "3.2.4"
4343
```
4444

45-
Note that `:tailwind` 0.3+ supports Tailwind v4+. If you need to use Tailwind v3, use
46-
47-
```
48-
{:tailwind, "~> 0.2.0", only: :dev}
49-
```
50-
51-
instead, and refer to [the README in the 0.2 branch](https://github.com/phoenixframework/tailwind/blob/v0.2/README.md).
52-
53-
Now you can install Tailwind by running:
45+
Now you can install tailwind by running:
5446

5547
```bash
5648
$ mix tailwind.install
@@ -64,7 +56,7 @@ you can supply a third party path to the binary the installer wants
6456
$ mix tailwind.install https://people.freebsd.org/~dch/pub/tailwind/v3.2.6/tailwindcss-freebsd-x64
6557
```
6658

67-
And invoke Tailwind with:
59+
And invoke tailwind with:
6860

6961
```bash
7062
$ mix tailwind default
@@ -82,13 +74,14 @@ directory, the OS environment, and default arguments to the
8274

8375
```elixir
8476
config :tailwind,
85-
version: "4.0.0",
77+
version: "3.2.4",
8678
default: [
8779
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
9083
),
91-
cd: Path.expand("..", __DIR__)
84+
cd: Path.expand("../assets", __DIR__)
9285
]
9386
```
9487

@@ -99,18 +92,16 @@ to the ones configured above. Note profiles must be configured in your
9992

10093
## Adding to Phoenix
10194

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

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`:
10899

109100
```elixir
110101
def deps do
111102
[
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}
114105
]
115106
end
116107
```
@@ -122,19 +113,21 @@ alias for deployments (with the `--minify` option):
122113
"assets.deploy": ["tailwind default --minify", ..., "phx.digest"]
123114
```
124115

125-
Now let's change `config/config.exs` to tell `tailwind`
126-
to build our css bundle into `priv/static/assets`.
127-
We'll also give it our `assets/css/app.css` as our css entry point:
116+
Now let's change `config/config.exs` to tell `tailwind` to use
117+
configuration in `assets/tailwind.config.js` for building our css
118+
bundle into `priv/static/assets`. We'll also give it our `assets/css/app.css`
119+
as our css entry point:
128120

129121
```elixir
130122
config :tailwind,
131-
version: "4.0.0",
123+
version: "3.2.4",
132124
default: [
133125
args: ~w(
134-
--input=assets/css/app.css
135-
--output=priv/static/assets/app.css
126+
--config=tailwind.config.js
127+
--input=css/app.css
128+
--output=../priv/static/assets/app.css
136129
),
137-
cd: Path.expand("..", __DIR__)
130+
cd: Path.expand("../assets", __DIR__)
138131
]
139132
```
140133

@@ -146,10 +139,10 @@ the web application's asset directory in the configuration:
146139

147140
```elixir
148141
config :tailwind,
149-
version: "4.0.0",
142+
version: "3.2.4",
150143
default: [
151144
args: ...,
152-
cd: Path.expand("../apps/<folder_ending_with_web>", __DIR__)
145+
cd: Path.expand("../apps/<folder_ending_with_web>/assets", __DIR__)
153146
]
154147
```
155148

@@ -175,56 +168,6 @@ right away. It also generates a default configuration file called
175168
when we configured `tailwind` in `config/config.exs`. See
176169
`mix help tailwind.install` to learn more.
177170

178-
## Updating from Tailwind v3 to v4
179-
180-
For a typical Phoenix application, updating from Tailwind v3 to v4 requires the following steps:
181-
182-
1. Update the `:tailwind` library to version 0.3+
183-
184-
```diff
185-
defp deps do
186-
[
187-
- {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
188-
+ {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
189-
]
190-
end
191-
```
192-
193-
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).
227-
228171
## License
229172

230173
Copyright (c) 2022 Chris McCord.

0 commit comments

Comments
 (0)