2021.10.24
コンポーネントをTailwindCSSで配置していくためのtailwind.config.jsカスタム例
どんな時にカスタムが必要？
TailwindCSS はデフォルトでスタイルが用意されているクラスをコンポーネントなどに付与するだけでほぼ思い通りに配置できますが、細かいところはカスタムが必要な場合があります。
例えば padding や margin は単位に rem が使用されているのと、細かいところでも 0.125rem 単位で定義されているので、こまかく 1px 単位で調整するためのクラスを付与したい場合は tailwind.config.js をカスタムする必要があります。
tailwind.config.js をカスタムしてみる
それでは padding を例にカスタムしてみたいと思います。今回実現したいこととしては TailwindCSS で生成されたクラスを使うだけで 1px 単位で padding を調整できることです。
今回生成する padding は 0 - 200px 間としますが、これは tailwind.config.js を修正することでいつでも変えられます。
padding のカスタム例
JavaScript_____tailwind.config.js_____module.exports = {
mode: 'jit',
purge: [
'./src/pages/index.tsx',
'./src/pages/**/*.{js,ts,tsx}',
'./src/components/**/*.{js,ts,tsx}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
screens: {
sm: '560px',
md: '768px',
lg: '1000px',
},
// padding カスタム部分
padding: {
...[...Array(201)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
},
},
variants: {
extend: {},
},
plugins: [],
}tailwind.config.js をカスタムする場合 theme プロパティの中に記述していきます。
上記の padding プロパティに記述した reduce では以下のようなオブジェクトが返ってきます。
JavaScript_____tailwind.config.js_____ ...[...Array(201)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
// 以下 return される内容
{
'0': '0px',
'1': '1px',
'2': '2px',
// 省略
'200': '200px'
}
このオブジェクトをスプレッド構文で展開して padding のプロパティにしています。
ちなみに reduce する空の配列を Array(201) ではなく [...Array(201)] としているのは穴あき配列を防ぐためです。TailwindCSS を build したあと、サイトに訪れるユーザーに穴あき配列であったことによる影響が出ることはありませんが、不用意な穴あき配列は防ぎたいところです。
クラスを適用する
これで 0 - 200px の padding を TailwindCSS のクラスだけで適用する準備ができました。
上記のカスタムをすることで、例えば左右に 30px ずつ padding をつけたい場合、TailwindCSS で左右に padding を適用させるためのプリフィックスである px- に続けて、今回カスタムした 30 をつけて px-30 とクラスをつけるだけで左右に 30px ずつの padding をつけられるようになりました。
margin: auto; も含めて margin もカスタムする
padding のように 0 - 200px 間で margin プロパティを生成したあと、margin の場合は margin-xxxx: auto; が適用できるクラスも生成しておいた方が便利です。
そういう場合は以下のように続けて記述するだけです。
JavaScript_____tailwind.config.js_____ margin: {
...[...Array(201)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
auto: 'auto',
},
このように記述しておくことで、mx-auto や ml-auto などのクラスを付与してスタイルを適用できるようになります。
また、当記事の例では theme プロパティの直下に記述していますが extend の中に記述するとデフォルトの TailwindCSS のクラスに追加するかたちでカスタムも可能です。
tailwind.config.js のカスタム例
まだこれからアップデートしていくと思いますが、自身が使うプロパティを記述した例を貼っておきます。
JavaScript_____tailwind.config.js_____module.exports = {
mode: 'jit',
purge: [
'./src/pages/index.tsx',
'./src/pages/**/*.{js,ts,tsx}',
'./src/components/**/*.{js,ts,tsx}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
'custom-blue': '#1e90ff',
'custom-light-blue': '#87cefa',
'custom-green': '#32cd32',
'custom-yellow': '#ffd700',
'custom-orange': '#ffa500',
'custom-red': '#d20002',
'custom-pink': '#ffc0cb',
'custom-gray': '#959595',
},
scale: {
flip: '-1',
},
minHeight: {
'100vh': '100vh',
},
borderWidth: {
3: '3px',
},
},
screens: {
xs: '375px',
sm: '600px',
md: '768px',
lg: '1024px',
xl: '1100px',
},
maxWidth: {
...[...Array(1201)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
xs: '375px',
sm: '600px',
md: '768px',
lg: '1024px',
xl: '1100px',
none: 'none',
},
minWidth: {
...[...Array(1201)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
xs: '375px',
sm: '600px',
md: '768px',
lg: '1024px',
xl: '1100px',
none: 'none',
},
maxHeight: {
...[...Array(1201)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
},
borderRadius: {
...[...Array(32)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
'100vh': '100vh',
},
fontSize: {
...[...Array(101)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}vw`] = `${i}vw`
return m
}, {}),
},
padding: {
...[...Array(301)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
...[...Array(5)].reduce((m, _, i) => {
m[`${i}em`] = `${i}em`
return m
}, {}),
},
margin: {
...[...Array(301)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(301)].reduce((m, _, i) => {
m[`minus-${i}`] = `-${i}px`
return m
}, {}),
auto: 'auto',
},
width: {
...[...Array(1001)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
fit: 'fit-content',
},
height: {
...[...Array(1001)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
fit: 'fit-content',
},
lineHeight: {
...[...Array(101)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
'1em': '1em',
},
zIndex: {
...[...Array(10001)].reduce((m, _, i) => {
m[i] = `${i}`
return m
}, {}),
'minus-1': '-1',
auto: 'auto',
},
translate: {
...[...Array(1001)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(1001)].reduce((m, _, i) => {
m[`minus-${i}`] = `-${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`minus-${i}p`] = `-${i}%`
return m
}, {}),
},
inset: {
...[...Array(1001)].reduce((m, _, i) => {
m[i] = `${i}px`
return m
}, {}),
...[...Array(1001)].reduce((m, _, i) => {
m[`minus-${i}`] = `-${i}px`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`${i}p`] = `${i}%`
return m
}, {}),
...[...Array(101)].reduce((m, _, i) => {
m[`minus-${i}p`] = `-${i}%`
return m
}, {}),
auto: 'auto',
},
},
variants: {
extend: {},
},
plugins: [],
}