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: [],
}