Replies: 1 comment 2 replies
-
|
By default, many of Tailwind's length values are expressed in Thus, it seems like the page that your Chrome extension runs on has modified the
We can see from the To work-around this, you could consider reworking the values in the Tailwind configuration to use pixel values: const defaultTheme = require("tailwindcss/defaultTheme");
const remToPx = (value) =>
value.endsWith("rem") ? `${parseFloat(value.slice(0, -3)) * 16}px` : value;
/** @type {import('tailwindcss').Config} */
export default {
// …
theme: {
extend: {
spacing: Object.fromEntries(
Object.entries(defaultTheme.spacing).map(([key, value]) => [
key,
remToPx(value),
]),
),
fontSize: Object.fromEntries(
Object.entries(defaultTheme.fontSize).map(([key, value]) => [
key,
[
remToPx(value[0]),
{ ...value[1], lineHeight: remToPx(value[1].lineHeight) },
],
]),
),
},
},
};There are some other value sets that use |
Beta Was this translation helpful? Give feedback.
-
|
tks, i found this solution
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks! For injected chrome extension that's the only fix I found to use tailwind classes. |
Beta Was this translation helpful? Give feedback.
-
I built a Chrome extension and it ran well, but I found that when my content page was injected into the current page, the styles were not displayed correctly. To be precise, all style sizes were enlarged. I used tailwindcss, and the color The category, the italic one looks correct, but the size category is not normal. For example, what I set is: class="flex items-center p-5 py-4 text-sm text-gray-500" but the performance is paddingx is 125, paddingy100, the font size is also enlarged, the setting is 14px, but Actual 87.5px
Beta Was this translation helpful? Give feedback.
All reactions