Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
tailwindcss with px2rem
module.exports = {
purge: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
darkMode: false, // or 'media' or 'class'
theme: {
// https://github.com/tailwindlabs/tailwindcss/issues/1232
// using px2rem, 1rem = 100px for 1920 screen
fontSize: {
"xs": "0.12rem",
"sm": "0.14rem",
"base": "0.16rem",
"lg": "0.18rem",
"xl": "0.2rem",
"2xl": "0.24rem",
"3xl": "0.3rem",
"4xl": "0.36rem",
"5xl": "0.48rem",
"6xl": "0.6rem",
"7xl": "0.72rem"
},
spacing: {
px: '1px',
"0": "0",
"0.5": "0.02rem",
"1": "0.04rem",
"1.5": "0.06rem",
"2": "0.08rem",
"2.5": "0.1rem",
"3": "0.12rem",
"3.5": "0.14rem",
"4": "0.16rem",
"5": "0.2rem",
"6": "0.24rem",
"7": "0.28rem",
"8": "0.32rem",
"9": "0.36rem",
"10": "0.4rem",
"11": "0.44rem",
"12": "0.48rem",
"14": "0.56rem",
"16": "0.64rem",
"20": "0.8rem",
"24": "0.96rem",
"28": "1.12rem",
"32": "1.28rem",
"36": "1.44rem",
"40": "1.6rem",
"44": "1.76rem",
"48": "1.92rem",
"52": "2.08rem",
"56": "2.24rem",
"60": "2.4rem",
"64": "2.56rem",
"72": "2.88rem",
"80": "3.2rem",
"96": "3.84rem"
},
extend: {
lineHeight: {
"3": "0.12rem",
"4": "0.16rem",
"5": "0.2rem",
"6": "0.24rem",
"7": "0.28rem",
"8": "0.32rem",
"9": "0.36rem",
"10": "0.4rem"
}
},
},
variants: [/*'responsive',*/ 'hover', 'important'],
/*
variants: {
extend: {}
},
*/
plugins: [require('@neojp/tailwindcss-important-variant')]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment