83 lines
1.8 KiB
JavaScript
83 lines
1.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
|
|
const plugin = require("tailwindcss/plugin");
|
|
|
|
const backfaceVisibility = plugin(function ({ addUtilities }) {
|
|
addUtilities({
|
|
".backface-visible": {
|
|
"backface-visibility": "visible",
|
|
},
|
|
".backface-hidden": {
|
|
"backface-visibility": "hidden",
|
|
},
|
|
});
|
|
});
|
|
|
|
// const winged = plugin(function({addUtilities}) {
|
|
// addUtilities({
|
|
// '.winged': {
|
|
// 'position': 'relative',
|
|
// '&::before, &::after': {
|
|
// content: '""',
|
|
// width: '4rem',
|
|
// height: '2px',
|
|
// background: '#ea5f00',
|
|
// // color: 'white',
|
|
// // backgroundColor: 'white',
|
|
// position: 'absolute',
|
|
// top: '50%',
|
|
// left: 0,
|
|
// right: 0,
|
|
// margin: '0 auto',
|
|
// transform: 'translateY(-50%)'
|
|
// },
|
|
// '&::before': {
|
|
// // left: '-2.5rem'
|
|
// },
|
|
// '&::after': {
|
|
// // left: '2.5rem'
|
|
// }
|
|
|
|
// }
|
|
// })
|
|
// });
|
|
|
|
const winged = plugin(function({ addUtilities }) {
|
|
const createWingedClass = (position) => {
|
|
return {
|
|
'position': 'relative',
|
|
'&::before, &::after': {
|
|
content: '""',
|
|
height: '2px',
|
|
width: '4rem',
|
|
background: '#ea5f00',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: 0,
|
|
right: 0,
|
|
margin: '0 auto',
|
|
transform: 'translateY(-50%)'
|
|
},
|
|
'&::before': {
|
|
left: `-${position}`,
|
|
},
|
|
'&::after': {
|
|
left: position,//`${position}rem`,
|
|
}
|
|
};
|
|
};
|
|
|
|
addUtilities({
|
|
'.winged-11': createWingedClass('11rem'),
|
|
'.winged-14': createWingedClass('14rem')
|
|
});
|
|
});
|
|
|
|
module.exports = {
|
|
content: ["./src/**/*.{html,ts}"],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [winged, backfaceVisibility],
|
|
};
|