刀片值传递到css的速度不够快有问题吗

Question

我遇到了一个奇怪的问题，我认为这是因为与实际的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起作用。我只能看到一列。

现在有一件奇怪的事情，如果我手动将所有{{$count}}替换为"$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')
],
}

你知道怎么绕过这个吗？

谢谢

Answer 1

您正在尝试使用不建议使用的动态类名。

但是，您可以通过安全登录类来绕过此问题。

例如，可以将以下内容添加到tailwind.config.js中。

这将编译所有定义的类，无论它们是否在刀片模板(如md:grid-cols-5、grid-cols-3等(中使用。

// tailwind.config.js
module.exports = {
// ...
safelist: [
{
// Option A - Add as needed
pattern: /grid-cols-(1|2|3|4|5)/,
// Option B - Overkill, but easier to maintain
// * is a wildcard, and will take longer to compile
pattern: /grid-cols-*/,
variants: ['sm', 'md', 'lg', 'xl'], // for xx: prefixes
},
],
// ...
}