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.

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

docs: update tailwind.config.ts to use satisfies operator #73924

Merged
merged 2 commits into from
Dec 16, 2024

Conversation

JamBalaya56562
Copy link
Contributor

@JamBalaya56562 JamBalaya56562 commented Dec 13, 2024

What?

Use satisfies operator for reference tailwindcss configuration.

Why?

  1. To refer to tailwind extended type.
use satisfies operator instead of type in tailwind.config.ts

Tailwind provides a resolveConfig helper you can use to generate a fully merged version of your configuration object:

// type.ts
import type resolveConfig from "tailwindcss/resolveConfig";
import type config from "./tailwind.config";

type ResolveConfig = ReturnType<typeof resolveConfig<typeof config>>;

type ResolveConfigTheme = ResolveConfig["theme"];

type Color = keyof ResolveConfigTheme["colors"];
// type Color = "primary" | "secondary" | "tertiary" | keyof DefaultColors
// --- DefaultColors contain ... ---
// type Color = "primary" | "secondary" | "tertiary" | "inherit" | "current" |
//              "transparent" | "black" | "white" | "slate" | "gray" | "zinc" | 
//              "neutral" | "stone" | "red" | "orange" | ... 20 more

type FontSize = keyof ResolveConfigTheme["fontSize"];
// type FontSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | 
//                 "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"

type ZIndex = keyof ResolveConfigTheme["zIndex"];
// type ZIndex = "0" | "10" | "20" | "30" | "40" | "50" | "auto"

However, the type information cannot be successfully obtained by using Config types.

// tailwind.config.ts
import type { Config } from "tailwindcss";

// ❌ can't get type info
const config: Config = {
// ...
};

// ✔️ can get type info
const config = {
// ...
} satisfies Config;

export default config

That's why I introduced satisfies operator.
In addition, official tailwind configuration uses satisfies operator.

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

Improving Documentation

@ijjk ijjk added the Documentation Related to Next.js' official documentation. label Dec 13, 2024
@ijjk
Copy link
Member

ijjk commented Dec 13, 2024

Allow CI Workflow Run

  • approve CI run for commit: e540da7

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@leerob leerob merged commit eae6749 into vercel:canary Dec 16, 2024
39 checks passed
@JamBalaya56562 JamBalaya56562 deleted the satisfies branch December 16, 2024 01:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Documentation Related to Next.js' official documentation.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants