Can't override default translate-*-px
#19622
-
|
What version of Tailwind CSS are you using? For example: v4.1.18 What build tool (or framework if it abstracts the build tool) are you using? For example: postcss 8.5.6, Next.js 16.1.4 What version of Node.js are you using? For example: v22.18.0 What browser are you using? For example: Chrome, Hellium What operating system are you using? For example: Windows Reproduction URL https://play.tailwindcss.com/4ilgjQxWWO Describe your issue I want to override default @import "tailwindcss";
@theme {
--translate-x-px: var(--px);
--translate-y-px: var(--px);
}
:root {
--px: 15px;
}(I've changed And then using it: <div class="border">
<p class="translate-x-px">
Link translate-x Only
</p>
</div>Result: It did translate by x-axis |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
SolutionYou'd want to set AnalysisYour original config produced this CSS: .translate-x-px {
--tw-translate-x: var(--translate-x-px) /* var(--px) */;
--tw-translate-y: var(--translate-x-px) /* var(--px) */;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-px {
--tw-translate-x: 1px;
translate: var(--tw-translate-x) var(--tw-translate-y);
}What happened is that you created two theme token values for So now,
Hence, it translates |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I understood. That But I think we should have a customize section at the end of the translate page on the docs. And a note for this case too. |
Beta Was this translation helpful? Give feedback.
Solution
You'd want to set
--translate-pxinstead of--translate-x-pxand--translate-y-px: https://play.tailwindcss.com/6cl3KwAT1e?file=cssAnalysis
Your original config produced this CSS:
What happened is that you created two theme token values for
translate,x-pxandy-px.So now,
translate-x-pxwould mean both:translate-|x-px: translatexandyby the value ofx-px,15px.translate-x-|px: …