Replies: 3 comments 6 replies
-
|
Hey! Our goal with Tailwind CSS v4 is to keep things simple. If you want to customize your theme values then you can, but if you want to rely on default values that existed before, then you currently have to copy & paste them. It's a tiny bit more work, but luckily you typically only have to do that once. We could make it work with some fancy syntax, but that would only introduce new syntax that you'd have to learn. Something that comes to mind: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @RobinMalfait. Fully support the idea to keep things simple. Thought it's not particularly clear how to migrate v3 config to v4 and not introduce Having |
Beta Was this translation helpful? Give feedback.
-
|
👋 Would also like to note that I'm running into this as well and the solution of copy/pasting the values from within Tailwind v3 to my config in v4 feels really dirty. It'd be nice to have the default font stacks available as dedicated variables that can be referenced if you want to extend font-sans etc. |
Beta Was this translation helpful? Give feedback.
-
|
I agree. It's not very futureproof, and I trust Tailwind's default theme the most in terms of staying up to date to the latest CSS features. |
Beta Was this translation helpful? Give feedback.
-
|
I see that on html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var( --default-font-variation-settings, normal );
-webkit-tap-highlight-color: transparent;
}Would the most semantic way then not be to override the So you would define |
Beta Was this translation helpful? Give feedback.
-
|
I currently append @theme {
--font-roboto: "Roboto Flex", "Roboto", var(--font-sans);
}<body class="font-roboto">
<!-- Content goes here... -->
</body>This way, it doesn't touch the default |
Beta Was this translation helpful? Give feedback.
-
|
I'm using Tailwind with Astro (5.2) With tailwindcss 3 the above configuration + import "@fontsource-variable/inter/index.css"; in the Layout.astro was enough to make it work. Now it's not picking up in Tailwind 4 ? |
Beta Was this translation helpful? Give feedback.
-
|
Would love actual guidance on how to properly override |
Beta Was this translation helpful? Give feedback.
-
|
You can do: @theme {
--default-font-family: Inter, Arial, sans-serif; /* Replace value with your desired value. */
}Though typically you'd want to replace it with an existing font stack (so it is consistent with an existing font stack already in your config: @theme {
--default-font-family: var(--font-serif);
} |
Beta Was this translation helpful? Give feedback.
-
In v3 it was really easy to extend default
font-familyconfiguration by prependingsans:In v4 there doesn't seem to be a way to reference that default font stack anymore via CSS-first configuration.
If I use the following definition
—font-sans: "Inter";it will negate default font stack causing browser to fallback toseriffont while custom font is loading (font-display: swapis applied). So I need to somehow to reference default font stack in--font-sansvariable.Current workaround seems to be to copy default stack and declare
But this feels really unnecessary.
Is there a more elegant solution to this problem? Or maybe tailwindcss v4 could declare css variable with default font stack for others to reference?
Beta Was this translation helpful? Give feedback.
All reactions