我有一个奇怪的问题，我相信这是因为刀片值没有传递到页面的速度比实际的CSS。我有一个像这样的网格在顺风在刀片模板：
<div class="mt-4 md:m-0 grid sm:grid-cols-1 md:grid-cols-{{$count}} lg:grid-cols-{{$count}} xl:grid-cols-{{$count}} gap-2 content-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>当我在加载dom后读取dom时，我得到的正确值为：
<div class="mt-4 md:m-0 grid sm:grid-cols-1 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 gap-2 content-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>但是在我的前端只有网格sm：grid-cols-1可以工作，我只能看到1列。
现在这里是奇怪的事情，如果我用手替换所有的{{$count}}到“5”，只有这样我才会得到正确的网格计数。
据我所知，CSS先于PHP代码加载，并且只能读取第一个网格sm：grid-cols-1
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
'./node_modules/flowbite/**/*.js'
],
theme: {
extend: {
fontFamily: {
montserrat: ['Montserrat'],
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
colors: {
transparent: 'transparent',
current: 'currentColor',
'yellow': '#FFDD03',
'yellow-form': '#FFDD0366',
"red": {
"50": "#fe3232",
"100": "#f42828",
"200": "#ea1e1e",
"300": "#e01414",
"400": "#d60a0a",
"500": "#cc0000",
"600": "#c20000",
"700": "#b80000",
"800": "#ae0000",
"900": "#a40000"
},
"teal": {
"50": "#72e2f1",
"100": "#68d8e7",
"200": "#5ecedd",
"300": "#54c4d3",
"400": "#4abac9",
"500": "#40b0bf",
"600": "#36a6b5",
"700": "#2c9cab",
"800": "#2292a1",
"900": "#188897"
},
"green": {
"50": "#ffffbd",
"100": "#f5ffb3",
"200": "#ebffa9",
"300": "#e1ff9f",
"400": "#d7f595",
"500": "#cdeb8b",
"600": "#c3e181",
"700": "#b9d777",
"800": "#afcd6d",
"900": "#a5c363"
},
"blue": {
"50": "#72c8ff",
"100": "#68beff",
"200": "#5eb4ff",
"300": "#54aaff",
"400": "#4aa0f8",
"500": "#4096ee",
"600": "#368ce4",
"700": "#2c82da",
"800": "#2278d0",
"900": "#186ec6"
},
"orange": {
"50": "#ffa632",
"100": "#ff9c28",
"200": "#ff921e",
"300": "#ff8814",
"400": "#ff7e0a",
"500": "#ff7400",
"600": "#f56a00",
"700": "#eb6000",
"800": "#e15600",
"900": "#d74c00"
},
"black": {
"50": "#565555",
"100": "#4c4b4b",
"200": "#424141",
"300": "#383737",
"400": "#2e2d2d",
"500": "#242323",
"600": "#1a1919",
"700": "#100f0f",
"800": "#060505",
"900": "#000000"
}
},
rotate: {
'5': '5deg',
},
keyframes: {
'fade-in': {
'0%': {
opacity: '0',
},
'100%': {
opacity: '1',
},
},
'fade-out': {
'100%': {
opacity: '1',
},
'0%': {
opacity: '0',
},
},
'roll-in-blurred-right': {
"0%": {
transform: "translateX(1000px) rotate(720deg)",
filter: "blur(50px)",
opacity: "0"
},
to: {
transform: "translateX(0) rotate(0deg)",
filter: "blur(0)",
opacity: "1"
}
}
},
animation: {
'fade-in': 'fade-in 0.5s',
'slow-fade-in': 'fade-in 1s',
'fade-out': 'fade-out 0.5s',
'slow-fade-out': 'fade-out 1s',
'roll-in-blurred-right': 'roll-in-blurred-right 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both'
},
},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require("daisyui"),
require('flowbite/plugin')
],
}你知道怎么解决这个问题吗？
谢谢
1条答案
按热度按时间wvt8vs2t1#
您正在尝试使用动态类名，建议不要使用此名称。
但是，您可以通过Safetlisting类来解决这个问题。
例如，可以将以下内容添加到
tailwind.config.js。这将编译所有已定义的类，而不管它们是否在刀片模板（如
md:grid-cols-5、grid-cols-3等）中使用。