tailwindcss 질문드립니다.
본문
/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');
const add_base_rules = [];
module.exports = {
mode: 'jit',
content: [
'*.php',
],
theme: {
},
plugins: [
plugin( function ({addBase,matchUtilities}) {
matchUtilities({
fs: (value) => {
addBase({
':root': { '--fs-w':'30px' }
})
return {
fontSize: `${value}px`,
}
},
});
// addBase({
// ':root': { '--fs-w':'30px' }
// })
}),
],
}
matchUtilities내에서 addBase를 사용하고싶은데요. 주석처리된곳에서는 적용이 잘되지만, matchUtilities내에서는 안되네요. settimeout, 미리 변수선언하고 await써서 나중에 처리되도록 해도 적용이 안됩니다. 혹시 답을 알고계신분 계시면 도움 부탁드립니다.
답변 1
const plugin = require('tailwindcss/plugin');
module.exports = {
mode: 'jit',
content: [
'*.php',
],
theme: {
// ...
},
plugins: [
plugin(function ({ addBase, matchUtilities }) {
// 먼저 matchUtilities를 실행
matchUtilities({
fs: (value) => {
// addBase 내부에서 직접 호출
addBase({
':root': { '--fs-w': `${value}px` },
});
return {
fontSize: `${value}px`,
};
},
});
}),
],
};
//이렇게 한번해보시겠습니까?
혹시 제가 올린 코드랑 어느부분에 다른건가요?
차이점은 아래와같습니다. 크티님은 유틸리티를 먼저생성하고 전역스타일을 뒤로 처리한것뿐입니다.
이를 설명을하자면,
matchUtilities 함수는 클래스 유틸리티를 생성하는 함수입니다.
addBase는 전역 스타일을 추가하는 함수입니다.
따라서
matchUtilities 내에서는 작동하지 않습니다.
그려면,
matchUtilities 함수 내부에서 addBase를 호출하고,
:root에 --fs-w 변수를 추가하고,
동시에 fs 클래스 유틸리티를 생성하고, 값을 반환을 해야합니다.
즉, 전역 스타일과 클래스 유틸리티를 동시에 추가할 수 있다라는 뜻이겟죠.
조금더 다르게 덜 복잡하게 각 플러그인에서 독립적으로 해볼수도있습니다.
const plugin = require('tailwindcss/plugin');
module.exports = {
mode: 'jit',
content: [
'*.php',
],
theme: {
extend: {},
},
plugins: [
plugin(function ({ addBase }) {
addBase({
':root': {
'--fs-w': '30px', // 전역 스타일
}
});
}),
plugin(function ({ matchUtilities }) {
matchUtilities({
fs: (value) => ({
fontSize: `${value}px`,
}),
});
}),
],
};