Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document upgrade path for --config CLI option #2041

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+21 −0
Open

Document upgrade path for --config CLI option #2041

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions src/docs/upgrade-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { CodeExampleStack } from "@/components/code-example";

export const title = "Upgrade guide";
export const description = "Upgrading your Tailwind CSS projects from v3 to v4.";

Expand Down Expand Up @@ -74,6 +76,25 @@ npx tailwindcss -i input.css -o output.css
npx @tailwindcss/cli -i input.css -o output.css
```

#### CLI options

In v3, you could use the `--config` option to point to your configuration file.
In v4 there is no configuration file anymore. If you still require a
configuration file, make sure to include it in your CSS file and use the `@config` directive:
Comment on lines +81 to +83
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about something like this? (probably still needs to be split across multiple lines tho)

Suggested change
In v3, you could use the `--config` option to point to your configuration file.
In v4 there is no configuration file anymore. If you still require a
configuration file, make sure to include it in your CSS file and use the `@config` directive:
In v3, you could use the `--config` option to point to your configuration file. Now that projects are configured via CSS this option is no longer available. For projects that require a configuration file for compatibility reasons, load the file by using the `@config` directive in your CSS:


<CodeExampleStack>

```css
/* [!code filename:input.css] */
@config "./tailwind.config.js";
```

```shell
npx @tailwindcss/cli -i input.css -o output.css
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should you include the config file content as an example code block too?


</CodeExampleStack>

## Changes from v3

Here's a comprehensive list of all the breaking changes in Tailwind CSS v4.0.
Expand Down