tailwindcss 질문드립니다.

tailwindcss 질문드립니다.

QA

tailwindcss 질문드립니다.

답변 1

본문



/** @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`,
                }),
            });
        }),
    ],
};

답변을 작성하시기 전에 로그인 해주세요.
전체 3
© SIRSOFT
현재 페이지 제일 처음으로