Форум

od0201 · #1 (**permalink**) 08.08.2022, 23:04

мне нужно задавать размер поля через переменую, но

const fieldXClass=`w-[${8*maxX}rem]`

стиль не применятся

const fieldXClass=`w-[32rem]`

стиль применятся,
если после этого прописать первый варинат, то стиль применятся
но если пересохранить, ничего не изменяя файл tailwind.config.js стиль опять перестанет применяться.

такая же история с h-, top-, left-

можно приписать закомментированую строку со всеми вариантами

//w-[8rem] w-[16rem] w-[24rem] w-[32rem]

и тогда стили прописаные как в первом варианте будут приметься
но я не могу прописывать все возможные варианты,
есть какое-то решение, кроме как использования в таких вариантах inline styling?
спасибо

рони · #2 (**permalink**) 09.08.2022, 00:16

od0201,
мысли вслух ...

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        let maxX = 2;
        const fieldXClass=`${8*maxX}rem`;

        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        clifford: '#228B22',
                        test: '#A9A9A9'
                    },
                    width : {
                         fieldXClass
                    }
                }
            }
        }
    </script>
</head>
<body>
    <h1 class="text-3xl font-bold underline text-clifford w-fieldXClass bg-test text-center">
        Привет мир!
    </h1>
</body>
</html>

od0201 · #3 (**permalink**) 09.08.2022, 16:59

Спасибо, да, как вариант для данного случая, но я наверно дал не совсем удачный пример.

Кроме этого мне нужно еще и двигаться по данному полю при помощи top- & left-, а тут уже константами не обойтись

Наверное самым приемлемым вариантом будет использовать инлайн стиль для этого

рони · #4 (**permalink**) 09.08.2022, 17:40

od0201,
можно только гадать)))

od0201 · #5 (**permalink**) 09.08.2022, 18:41

чтоб не гадать

это игра пятнашка

<div style={styles} 
    className="container rounded-lg relative mx-auto bg-indigo-200 border-[1rem] border-indigo-600">
    {puzzles.map((e:IPuzzle)=><Puzzle puzzle={e} key={e.id} />)}      
</div>

interface PuzzleProps{
    puzzle:IPuzzle
}

const Puzzle:React.FC<PuzzleProps>=({puzzle})=>{
    const dispatch=useAppDispatch()

    if (puzzle.number===0) return(null)

    const styles={left:`${8*puzzle.x}rem`, top:`${8*puzzle.y}rem`}
    return (
        <div style={styles}  className="absolute rounded-lg w-32 h-32 bg-yellow-600 hover:bg-yellow-300 border text-center text-6xl" 
            onClick={()=>dispatch(clickPuzzle(puzzle.id))}
        >
        <span className="w-0 h-32 inline-block align-middle"></span>
        <span>{puzzle.number}</span>
        </div>
    )
}
export default Puzzle

рони · #6 (**permalink**) 09.08.2022, 18:53

Сообщение от od0201

это игра пятнашка

ок!))) пока ничем помочь не могу.

Форум

Справочник

Discord чат

Курсы javascript