tailwindcss 질문드립니다. 채택완료
</p>
<pre>
/** @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' }
// })
}),
],
}
</pre>
<p>
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`,
};
},
});
}),
],
};
//이렇게 한번해보시겠습니까?
답변에 대한 댓글 3개
이를 설명을하자면,
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`,
}),
});
}),
],
};
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인