2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

tailwindcss のデフォルトの単位を rem から px に変更する方法

Posted at

tailwindcss はデフォルトの単位が rem になっています。

既存のプロジェクトに tailwindcss を導入する際、既に <html> に font-size が指定してされている場合(16px 以外)、プレイグラウンドや他のプロジェクトからエレメントをコピーした場合にサイズが変わってしまいます。

ですので、単位を px に変更したいと思います。

変更する場合は、tailwind.config.js を修正します。
(下記の例では spacing と borderRadius を変更しています)

ブラウザの <html> の font-size は 16px(大体) ですので、 1: '0.25rem',1: `${16 * 0.25}px`, と変更します。
default configuration

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    spacing: {
      px: "1px",
      0: "0px",
      0.5: `${16 * 0.125}px`,
      1: `${16 * 0.25}px`,
      1.5: `${16 * 0.375}px`,
      2: `${16 * 0.5}px`,
      2.5: `${16 * 0.625}px`,
      3: `${16 * 0.75}px`,
      3.5: `${16 * 0.875}px`,
      4: `${16 * 1}px`,
      5: `${16 * 1.25}px`,
      6: `${16 * 1.5}px`,
      7: `${16 * 1.75}px`,
      8: `${16 * 2}px`,
      9: `${16 * 2.25}px`,
      10: `${16 * 2.5}px`,
      11: `${16 * 2.75}px`,
      12: `${16 * 3}px`,
      14: `${16 * 3.5}px`,
      16: `${16 * 4}px`,
      20: `${16 * 5}px`,
      24: `${16 * 6}px`,
      28: `${16 * 7}px`,
      32: `${16 * 8}px`,
      36: `${16 * 9}px`,
      40: `${16 * 10}px`,
      44: `${16 * 11}px`,
      48: `${16 * 12}px`,
      52: `${16 * 13}px`,
      56: `${16 * 14}px`,
      60: `${16 * 15}px`,
      64: `${16 * 16}px`,
      72: `${16 * 18}px`,
      80: `${16 * 20}px`,
      96: `${16 * 24}px`,
    },
    borderRadius: {
      none: "0px",
      sm: `${16 * 0.125}px`,
      DEFAULT: `${16 * 0.25}px`,
      md: `${16 * 0.375}px`,
      lg: `${16 * 0.5}px`,
      xl: `${16 * 0.75}px`,
      "2xl": `${16 * 1}px`,
      "3xl": `${16 * 1.5}px`,
      full: "9999px",
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?