Add @source inline(…)

[philipp-spiess]

This PR adds a new experimental feature that can be used to force-inline utilities based on an input string. The idea is that all utilities matching the source string will be included in your CSS:

/* input.css */
@source inline('underline');

/* output.css */
.underline {
   text-decoration: underline;
}

Additionally, the source input is brace-expanded, meaning you can use one line to inline a whole namespace easily:

/* input.css */
@source inline('{hover:,}bg-red-{50,{100..900..100},950}');

/* output.css */
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-red-100 {
  background-color: var(--color-red-100);
}
.bg-red-200 {
  background-color: var(--color-red-200);
}
.bg-red-300 {
  background-color: var(--color-red-300);
}
.bg-red-400 {
  background-color: var(--color-red-400);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-red-600 {
  background-color: var(--color-red-600);
}
.bg-red-700 {
  background-color: var(--color-red-700);
}
.bg-red-800 {
  background-color: var(--color-red-800);
}
.bg-red-900 {
  background-color: var(--color-red-900);
}
.bg-red-950 {
  background-color: var(--color-red-950);
}
@media (hover: hover) {
  .hover\\:bg-red-50:hover {
    background-color: var(--color-red-50);
  }
  .hover\\:bg-red-100:hover {
    background-color: var(--color-red-100);
  }
  .hover\\:bg-red-200:hover {
    background-color: var(--color-red-200);
  }
  .hover\\:bg-red-300:hover {
    background-color: var(--color-red-300);
  }
  .hover\\:bg-red-400:hover {
    background-color: var(--color-red-400);
  }
  .hover\\:bg-red-500:hover {
    background-color: var(--color-red-500);
  }
  .hover\\:bg-red-600:hover {
    background-color: var(--color-red-600);
  }
  .hover\\:bg-red-700:hover {
    background-color: var(--color-red-700);
  }
  .hover\\:bg-red-800:hover {
    background-color: var(--color-red-800);
  }
  .hover\\:bg-red-900:hover {
    background-color: var(--color-red-900);
  }
  .hover\\:bg-red-950:hover {
    background-color: var(--color-red-950);
  }
}

This feature is also compatible with the not keyword that we're about to add to @source "…" in a follow-up PR. This can be used to set up an ignore list purely in CSS. The following code snippet, for example, will ensure that the .container utility is never created:

@theme {
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}
@source not inline("container");
@tailwind utilities;

Test plan

• See added unit tests
• The new brace expansion library was also benchmarked against the popular braces library:

  clk: ~3.96 GHz
  cpu: Apple M4 Max
  runtime: bun 1.1.34 (arm64-darwin)
  
  benchmark                   avg (min … max) p75 / p99    (min … top 1%)
  ------------------------------------------- -------------------------------
  braces                        31.05 ms/iter  32.35 ms  █        █          
                        (28.14 ms … 36.35 ms)  35.14 ms ██        █          
                      (  0.00  b … 116.45 mb)  18.71 mb ██████▁▁▁██▁█▁██▁█▁▁█
  
  ./brace-expansion             19.34 ms/iter  21.69 ms           █          
                        (12.53 ms … 26.63 ms)  25.53 ms      ▅  ▅ █  █       
                      (  0.00  b … 114.13 mb)  11.86 mb █▁▅▁██▁▅█▅█▅▁█▅█▅▅▁▅█
  
                              ┌                                            ┐
                                                              ╷┌────┬─┐     ╷
                        braces                                ├┤    │ ├─────┤
                                                              ╵└────┴─┘     ╵
                              ╷        ┌────┬───┐       ╷
            ./brace-expansion ├────────┤    │   ├───────┤
                              ╵        └────┴───┘       ╵
                              └                                            ┘
                              12.53 ms           23.84 ms           35.14 ms
  

[robsontenorio]

@philipp-spiess do we have some online docs for this ?

[sudarshan-mane]

Error: @source paths must be quoted.

@source inline('{hover:,}bg-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}');
@source inline('{hover:,}text-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}');
@source inline('{hover:,}border-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}');
@source inline('ring-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}');
@source inline('stroke-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}');
@source inline('fill-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}');

[philipp-spiess]

@sudarshan-mane Sounds like you're on the wrong version! Make sure both tailwindcss and @tailwindcss/{postcss,vite,cli} are updated to 4.1.1: https://play.tailwindcss.com/w0lNX41XfJ?file=css

[chrism1996]

Hi @philipp-spiess is this feature now supported in v4.1.1 ? I want to migrate but we need the safeList feature for going ahead, thanks

[philipp-spiess]

@chrism1996 Yep it's in 4.1 👍

[daniel-perez-f]

@philipp-spiess I have a question related to this source inline:

I dont know if is possible to get the "bg-red" / "bg-yellow" without any value.

Example:

@theme {
    --color-red: oklch(0.577 0.245 27.325);
    --color-red-light: oklch(0.885 0.062 18.334);
    --color-red-dark: oklch(0.444 0.177 26.899);
}

@source inline('{hover:,focus:,}bg-{red,yellow}-{50,{100..900..100},950,light,dark,}');

In this case is generated hover:bg-red-X focus:bg-red-X bg-red-X

With "light" and "dark" works, but if I pass a , without nothing dont generate the bg-red that I want to have it. Any idea how I can do it with this source inline?

Example in Tailwind Play: https://play.tailwindcss.com/YCUsYk1Gmt?file=css

Edit:

I have it working like this in two lines... but can be better if we can send direct a pass a , without nothing

@source inline('{hover:,focus:,}bg-{red}-{50,{100..900..100},950,light,dark}');
@source inline('bg-{red,yellow}');

Thanks.

[thecrypticace]

@daniel-perez-f The problem with the first pattern is that you're generating bg-red-, bg-yellow-, hover:bg-red-, etc… as classes. You can see this hover over the glob pattern in VSCode or in Tailwind Play:

In the correct single line version you have to make sure that the - is omitted as well:

@source inline('{hover:,focus:,}bg-{red,yellow}{,-{50,{100..900..100},950,light,dark}}');

I kinda like the two separate versions — feels more understandable — but you'll want to make sure you generate hover and focus versions as well if the intent is to match the pattern above it:

@source inline('{hover:,focus:,}bg-{red,yellow}-{50,{100..900..100},950,light,dark}');
@source inline('{hover:,focus:,}bg-{red,yellow}');