Allow configuration for using px instead of rem

[jaschaio]

I don't really know why the previous issues #800 and #968 got closed without a real response.

There are as much valid use cases for using rem as there are for using px.

Lets take the simple example of a website builder which has two seperate user interfaces. One that includes all the App Components designed using Tailwind, and another which includes the user generated content. If I would like to scale up or down only the user generated content area of the UI by modifying the font-size: 16px property on the body element, it only works if the rest of the user interface has a fixed sizes using px instead of rem. If everything uses rem I can't change the size of things independently of each other.

[adamwathan]

You can configure Tailwind to use whatever units you want, just open up your tailwind.config.js file and and go to town.

https://tailwindcss.com/docs/theme

We can only provide one default configuration and the default configuration we've chosen to provide uses rem to size things. If you want to use pixels you can provide your own pixel-based configuration.

[stuyam]

I have an app where we are running bootstrap 3 which had the root font size set to 14px. The current rems are based off the assumption you use a 16px root font size. I know the config can be updated to change all of these values. However I love keeping the config as stock as possible so when tailwinds updates or adds other values or properties those new ones will just work. It would be great if there were a "defaultUnit" or "unit" or something setting in tailwind that defaults to "rem" but could be set to "px".

I love tailwind because it can be so light weight and can be dropped into any project, but so much of it's config assumes that project already uses a root font size of 16px. I think it could be a lot easier to add to existing projects if there was an easy switch for pixels.

For now Ill copy and past config and convert by hand ¯_(ツ)_/¯

[risingblock]

I had this problem as well, so I did the conversion for font size, spacing and line height (assuming base 16px). I'll leave it here to save somebody some time. <3 tailwind

module.exports = {
  theme: {
    fontSize: {
      xs: '12px',
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '20px',
      '2xl': '24px',
      '3xl': '30px',
      '4xl': '36px',
      '5xl': '48px',
      '6xl': '60px',
      '7xl': '72px',
    },
    spacing: {
      px: '1px',
      0: '0',
      0.5: '2px',
      1: '4px',
      1.5: '6px',
      2: '8px',
      2.5: '10px',
      3: '12px',
      3.5: '14px',
      4: '16px',
      5: '20px',
      6: '24px',
      7: '28px',
      8: '32px',
      9: '36px',
      10: '40px',
      11: '44px',
      12: '48px',
      14: '56px',
      16: '64px',
      20: '80px',
      24: '96px',
      28: '112px',
      32: '128px',
      36: '144px',
      40: '160px',
      44: '176px',
      48: '192px',
      52: '208px',
      56: '224px',
      60: '240px',
      64: '256px',
      72: '288px',
      80: '320px',
      96: '384px',
    },
    extend: {
      lineHeight: {
        3: '12px',
        4: '16px',
        5: '20px',
        6: '24px',
        7: '28px',
        8: '32px',
        9: '36px',
        10: '40px',
      },
    },
  },
}

[jasontxf]

Thanks, @risingblock Just the thing I'm looking for :D

[nitaking]

@risingblock me too!

[joshualukecaine]

@risingblock Thanks dude!

[yellow1912]

I'm wondering if there is a way to grab the default configs, loop through it, and generate the px based config from that? It would save much time, especially when tailwind base is constantly updated.

[wenerme]

Have the same problem, when using shadow dom, the rem is controlled by outside html, the sdk use tailwindcss, so can not use rem, unless the consumer use 16px based rem too.

[wenerme]

@yellow1912 the default is here https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L7

[igdev116]

@risingblock Thanks your sharing! I have a problem when I use "rem" of Tailwind. For example, "w-8" have to be "32px" equal "2rem" of Tailwind but when I go to my Chrome browser, it missing "2px" or "4px" and only have "30px", I have not configured anything yet 😥

[zbecknell]

FYI: if anyone wants to use the default config to convert to pixels, this VS Code plugin allows quick conversion: https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem

You can select all and convert at once. In my case I decided to go to the sections I needed and convert one-by-one to then copy over to my config file.

This would be such a nice option to have baked in to know you don't have to manually specify these values (in case future properties are added). Wonder if a plugin can change such things or if that's outside the reach of plugins...

[joshua-scott]

Here's an update to @risingblock's config for Tailwind v3. It converts everything in the default config that uses rem to px (assuming 16px base). I used the px-to-rem extension suggested by @zbecknell's to do it quickly.

theme: {
  /**
   * Default tailwind values converted from rem to px:
   * */
  borderRadius: {
    none: "0px",
    sm: "2px",
    DEFAULT: "4px",
    md: "6px",
    lg: "8px",
    xl: "12px",
    "2xl": "16px",
    "3xl": "24px",
    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": "256px",
    "2xs": "288px",
    xs: "320px",
    sm: "384px",
    md: "448px",
    lg: "512px",
    xl: "576px",
    "2xl": "672px",
    "3xl": "768px",
    "4xl": "896px",
    "5xl": "1024px",
    "6xl": "1152px",
    "7xl": "1280px",
  },
  fontSize: {
    xs: ["12px", { lineHeight: "16px" }],
    sm: ["14px", { lineHeight: "20px" }],
    base: ["16px", { lineHeight: "24px" }],
    lg: ["18px", { lineHeight: "28px" }],
    xl: ["20px", { lineHeight: "28px" }],
    "2xl": ["24px", { lineHeight: "32px" }],
    "3xl": ["30px", { lineHeight: "36px" }],
    "4xl": ["36px", { lineHeight: "36px" }],
    "5xl": ["48px", { lineHeight: "1" }],
    "6xl": ["60px", { lineHeight: "1" }],
    "7xl": ["72px", { lineHeight: "1" }],
    "8xl": ["96px", { lineHeight: "1" }],
    "9xl": ["144px", { lineHeight: "1" }],
  },
  lineHeight: {
    none: "1",
    tight: "1.25",
    snug: "1.375",
    normal: "1.5",
    relaxed: "1.625",
    loose: "2",
    3: "12px",
    4: "16px",
    5: "20px",
    6: "24px",
    7: "28px",
    8: "32px",
    9: "36px",
    10: "40px",
  },
  maxWidth: ({ theme, breakpoints }) => ({
    none: "none",
    0: "0px",
    xs: "320px",
    sm: "384px",
    md: "448px",
    lg: "512px",
    xl: "576px",
    "2xl": "672px",
    "3xl": "768px",
    "4xl": "896px",
    "5xl": "1024px",
    "6xl": "1152px",
    "7xl": "1280px",
    full: "100%",
    min: "min-content",
    max: "max-content",
    fit: "fit-content",
    prose: "65ch",
    ...breakpoints(theme("screens")),
  }),
  spacing: {
    px: "1px",
    0: "0",
    0.5: "2px",
    1: "4px",
    1.5: "6px",
    2: "8px",
    2.5: "10px",
    3: "12px",
    3.5: "14px",
    4: "16px",
    5: "20px",
    6: "24px",
    7: "28px",
    8: "32px",
    9: "36px",
    10: "40px",
    11: "44px",
    12: "48px",
    14: "56px",
    16: "64px",
    20: "80px",
    24: "96px",
    28: "112px",
    32: "128px",
    36: "144px",
    40: "160px",
    44: "176px",
    48: "192px",
    52: "208px",
    56: "224px",
    60: "240px",
    64: "256px",
    72: "288px",
    80: "320px",
    96: "384px",
  },
}

[PooSham]

@joshua-scott I created a function that recursively looks after values that are formatted like float numbers and ending with "rem", and converts them to px.

function rem2px(input, fontSize = 16) {
  if (input == null) {
    return input;
  }
  switch (typeof input) {
    case "object":
      if (Array.isArray(input)) {
        return input.map((val) => rem2px(val, fontSize));
      } else {
        const ret = {};
        for (const key in input) {
          ret[key] = rem2px(input[key]);
        }
        return ret;
      }
    case "string":
      return input.replace(
        /(\d*\.?\d+)rem$/,
        (_, val) => parseFloat(val) * fontSize + "px"
      );
    default:
      return input;
  }
}

You can then call it with the default theme by importing it:

const defaultTheme = require("tailwindcss/defaultTheme");

And my theme configuration looks something like this:

...
borderRadius: rem2px(defaultTheme.borderRadius),
columns: rem2px(defaultTheme.columns),
fontSize: rem2px(defaultTheme.fontSize),
lineHeight: rem2px(defaultTheme.lineHeight),
minHeight: {
  ...rem2px(defaultTheme.minHeight),
  4: "16px",
  8: "32px"
},
...