Base Styling / REM Settings Outside Of <html> #3768

davzie · 2021-03-17T17:28:36Z

davzie
Mar 17, 2021

Hi Tailwind Team!

I'm trying to find a way to integrate TailwindCSS into an existing Bootstrap 3 project. To do this I'm encapsulating the new elements that I'm re-styling within a ShadowDOM so that the migrated component styles are completely unaffected by the existing Bootstrap 3 styles. As such, my basic thing like margin, colours all work beautifully, but the base styles that require the html tag for sizing just don't work.

Here's another discussion with a similar issue: #1892

Is there a workaround to this? My use-case is the only way I can find to nicely separate the two styles without having to resort to huge re-working via iframes.

Thanks <3

JaapWeijland · 2021-03-24T10:43:07Z

JaapWeijland
Mar 24, 2021

Hi Davzie, we had exactly the same problem; we styled a web component and the sizing was influenced by the font-size of the host site that was set to 10px, destroying the layout of our web component.

We circumvent this by overriding all Tailwind properties that used rem's to calculate the values with a custom calculation:

const calc = (num) => `calc(${num} * var(--srem))` // All css rem values will be overridden by this calculation

Then, in our tailwind.css, we added the following style:

:host {
    --srem: 16px;
}

Finally, in our tailwind.config.js, we did the following to all styles that used rems:

module.exports = {
    ...
    theme: {
        spacing: {
            ...
            '0.5': calc(.125),
            '1': calc(.25),
            ...
        }
    }
}

calc(.125) corresponds to the previous value .125rem.

It would be great if Tailwind would support substituting rems out of the box for these edge cases. Overriding all rem values manually was cumbersome.

6 replies

JaapWeijland Mar 25, 2021

No problem! Here is the resulting tailwind.config.js. I'm not sure if all rems are substituted in this config, but it works for us.

// fontsize based on a variable, s(hadow)rem instead of rem, which leaks css from the document into the shadowroot
const calc = (num) => `calc(${num} * var(--srem))`;

module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        spacing: {
            '0': '0px',
            '0.5': calc(0.125),
            '1': calc(0.25),
            '1.5': calc(0.375),
            '2': calc(0.5),
            '2.5': calc(0.625),
            '3': calc(0.75),
            '3.5': calc(0.875),
            '4': calc(1),
            '5': calc(1.25),
            '6': calc(1.5),
            '7': calc(1.75),
            '8': calc(2),
            '9': calc(2.25),
            '10': calc(2.5),
            '11': calc(2.75),
            '12': calc(3),
            '14': calc(3.5),
            '16': calc(4),
            '20': calc(5),
            '24': calc(6),
            '28': calc(7),
            '32': calc(8),
            '36': calc(9),
            '40': calc(10),
            '44': calc(11),
            '48': calc(12),
            '52': calc(13),
            '56': calc(14),
            '60': calc(15),
            '64': calc(16),
            '72': calc(18),
            '80': calc(20),
            '96': calc(24),
        },
        extend: {
            colors: {},
        },
        fontSize: {
            xs: calc(0.75),
            sm: calc(0.875),
            base: calc(1),
            lg: calc(1.125),
            xl: calc(1.25),
            '2xl': calc(1.5),
            '3xl': calc(1.875),
            '4xl': calc(2.25),
            '5xl': calc(3),
            '6xl': calc(4),
            '7xl': calc(5),
            '8xl': calc(5),
            '9xl': calc(5),
        },
        borderRadius: {
            none: '0',
            sm: calc(0.125),
            DEFAULT: calc(0.25),
            md: calc(0.375),
            lg: calc(0.5),
            xl: calc(0.75),
            '2xl': calc(1),
            '3xl': calc(1.5),
            full: '9999px',
        },
        lineHeight: {
            '3': calc(0.75),
            '4': calc(1),
            '5': calc(1.25),
            '6': calc(1.5),
            '7': calc(1.75),
            '8': calc(2),
            '9': calc(2.25),
            '10': calc(2.5),
            none: 1,
            tight: 1.25,
            snug: 1.375,
            normal: 1.5,
            relaxed: 1.625,
            loose: 2,
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

andrewshvv May 29, 2024

Miracle, thank u very much!

jBernavaPrah Nov 21, 2024

Hi!

Thanks for this guide!

For the V3 of tailwindcss, the following is the complete config file with this overriding, based on the following config.full.js from tailwindcss github.

I changed each 'Xrem' with the relative calc(X).

I hope it is useful for someone. :)

import { Config } from 'tailwindcss';

// fontsize based on a variable, s(hadow)rem instead of rem, which leaks css from the document into the shadowroot
const calc = (num: string | number) => `calc(${num} * var(--srem))`;

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

  theme: {

    borderRadius: {
      none: '0px',
      sm: calc(0.125),
      DEFAULT: calc(0.25),
      md: calc(0.375),
      lg: calc(0.5),
      xl: calc(0.75),
      '2xl': calc(1),
      '3xl': calc(1.5),
      full: '9999px',
    },

    columns: {
      auto: 'auto',
      1: '1',
      2: '2',
      3: '3',
      4: '4',
      5: '5',
      6: '6',
      7: '7',
      8: '8',
      9: '9',
      10: '10',
      11: '11',
      12: '12',
      '3xs': calc(16),
      '2xs': calc(18),
      xs: calc(20),
      sm: calc(24),
      md: calc(28),
      lg: calc(32),
      xl: calc(36),
      '2xl': calc(42),
      '3xl': calc(48),
      '4xl': calc(56),
      '5xl': calc(64),
      '6xl': calc(72),
      '7xl': calc(80),
    },

    fontSize: {
      xs: [calc(0.75), { lineHeight: calc(1) }],
      sm: [calc(0.875), { lineHeight: calc(1.25) }],
      base: [calc(1), { lineHeight: calc(1.5) }],
      lg: [calc(1.125), { lineHeight: calc(1.75) }],
      xl: [calc(1.25), { lineHeight: calc(1.75) }],
      '2xl': [calc(1.5), { lineHeight: calc(2) }],
      '3xl': [calc(1.875), { lineHeight: calc(2.25) }],
      '4xl': [calc(2.25), { lineHeight: calc(2.5) }],
      '5xl': [calc(3), { lineHeight: '1' }],
      '6xl': [calc(3.75), { lineHeight: '1' }],
      '7xl': [calc(4.5), { lineHeight: '1' }],
      '8xl': [calc(6), { lineHeight: '1' }],
      '9xl': [calc(8), { lineHeight: '1' }],
    },

    lineHeight: {
      none: '1',
      tight: '1.25',
      snug: '1.375',
      normal: '1.5',
      relaxed: '1.625',
      loose: '2',
      3: calc(.75),
      4: calc(1),
      5: calc(1.25),
      6: calc(1.5),
      7: calc(1.75),
      8: calc(2),
      9: calc(2.25),
      10: calc(2.5),
    },

    maxWidth: ({ theme, breakpoints }) => ({
      ...theme('spacing'),
      none: 'none',
      xs: calc(20),
      sm: calc(24),
      md: calc(28),
      lg: calc(32),
      xl: calc(36),
      '2xl': calc(42),
      '3xl': calc(48),
      '4xl': calc(56),
      '5xl': calc(64),
      '6xl': calc(72),
      '7xl': calc(80),
      full: '100%',
      min: 'min-content',
      max: 'max-content',
      fit: 'fit-content',
      prose: '65ch',
      ...breakpoints(theme('screens')),
    }),
    spacing: {
      px: '1px',
      0: '0px',
      0.5: calc(0.125),
      1: calc(0.25),
      1.5: calc(0.375),
      2: calc(0.5),
      2.5: calc(0.625),
      3: calc(0.75),
      3.5: calc(0.875),
      4: calc(1),
      5: calc(1.25),
      6: calc(1.5),
      7: calc(1.75),
      8: calc(2),
      9: calc(2.25),
      10: calc(2.5),
      11: calc(2.75),
      12: calc(3),
      14: calc(3.5),
      16: calc(4),
      20: calc(5),
      24: calc(6),
      28: calc(7),
      32: calc(8),
      36: calc(9),
      40: calc(10),
      44: calc(11),
      48: calc(12),
      52: calc(13),
      56: calc(14),
      60: calc(15),
      64: calc(16),
      72: calc(18),
      80: calc(20),
      96: calc(24),
    },

  },
  plugins: [],

} satisfies Config

MichaelBrunn3r Jan 23, 2025

Here is my fix so far using Tailwind v4:

:host {
    --hem: 16px; /* hem = Host rem */
}

@theme {
    --spacing: calc(0.25 * var(--hem));

    /* Font size */
    --text-xs: calc(0.75 * var(--hem));
    --text-sm: calc(0.875 * var(--hem));
    --text-base: calc(1 * var(--hem));
    --text-lg: calc(1.125 * var(--hem));
    --text-xl: calc(1.25 * var(--hem));
    --text-2xl: calc(1.5 * var(--hem));
    --text-3xl: calc(1.875 * var(--hem));
    --text-4xl: calc(2.25 * var(--hem));
    --text-5xl: calc(3 * var(--hem));
    --text-6xl: calc(3.75 * var(--hem));
    --text-7xl: calc(4.5 * var(--hem));
    --text-8xl: calc(6 * var(--hem));
    --text-9xl: calc(8 * var(--hem));

    /* Radius */
    --radius-xs: calc(0.125 * var(--hem));
    --radius-sm: calc(0.25 * var(--hem));
    --radius-md: calc(0.375 * var(--hem));
    --radius-lg: calc(0.5 * var(--hem));
    --radius-xl: calc(0.75 * var(--hem));
    --radius-2xl: calc(1 * var(--hem));
    --radius-3xl: calc(1.5 * var(--hem));
    --radius-4xl: calc(2 * var(--hem));

    /* Breakpoint */
    --breakpoint-sm: calc(40 * var(--hem));
    --breakpoint-md: calc(48 * var(--hem));
    --breakpoint-lg: calc(64 * var(--hem));
    --breakpoint-xl: calc(80 * var(--hem));
    --breakpoint-2xl: calc(96 * var(--hem));

    /* Container */
    --container-3xs: calc(16 * var(--hem));
    --container-2xs: calc(18 * var(--hem));
    --container-xs: calc(20 * var(--hem));
    --container-sm: calc(24 * var(--hem));
    --container-md: calc(28 * var(--hem));
    --container-lg: calc(32 * var(--hem));
    --container-xl: calc(36 * var(--hem));
    --container-2xl: calc(42 * var(--hem));
    --container-3xl: calc(48 * var(--hem));
    --container-4xl: calc(56 * var(--hem));
    --container-5xl: calc(64 * var(--hem));
    --container-6xl: calc(72 * var(--hem));
    --container-7xl: calc(80 * var(--hem));
}

weilinzung Jul 8, 2025

@MichaelBrunn3r how do you get the source list for v4 now?

huygn · 2021-08-22T13:21:41Z

huygn
Aug 22, 2021

I was hitting a similar use case where I wanted to replace rem with em, and developed this little helper: https://github.com/huygn/tailwind-unit-replace.

Not only supporting rem -> em, you can replace it with anything by checking the example in readme, hope this help :)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Base Styling / REM Settings Outside Of <html> #3768

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 6 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Base Styling / REM Settings Outside Of <html> #3768

Uh oh!

Replies: 2 comments · 6 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 2 comments 6 replies