Warning: warn - fluid-tailwind: Fluid extractor not found in your Tailwind config
When linting a next 14.2.23 project I'm working on, I get the following warning:
```
warn - fluid-tailwind: Fluid extractor not found in your Tailwind config
```
Strangely, this warning is only shown when linting with `npm run lint`. I clearly have a eslint disable comment at the top for my tailwind.config.ts, though the warning itself is not from eslint (eslint's warning messages look differently). I'm not sure where the warning is from.
The warning does not appear when running `npm next dev`, `npm next build` or `npm next start`
Here's my tailwind.config.ts
```
/* eslint-disable */
import type { Config } from "tailwindcss";
import postcss from "postcss";
import fluid, { extract, screens, fontSize } from "fluid-tailwind";
const config: Config = {
darkMode: ["selector"],
content: {
files: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
extract,
},
theme: {
screens,
fontSize,
container: {
center: true,
},
extend: {
colors: {
primary: {
DEFAULT:
"color-mix(in srgb, var(--clr-primary-text) calc(100% * <alpha-value>), transparent)",
},
light: {
DEFAULT:
"color-mix(in srgb, var(--clr-primary-light) calc(100% * <alpha-value>), transparent)",
},
dark: {
DEFAULT:
"color-mix(in srgb, var(--clr-primary-dark) calc(100% * <alpha-value>), transparent)",
},
accent: {
DEFAULT:
"color-mix(in srgb, var(--clr-accent) calc(100% * <alpha-value>), transparent)",
50: "color-mix(in srgb, var(--clr-accent-50) calc(100% * <alpha-value>), transparent)",
100: "color-mix(in srgb, var(--clr-accent-100) calc(100% * <alpha-value>), transparent)",
200: "color-mix(in srgb, var(--clr-accent-200) calc(100% * <alpha-value>), transparent)",
300: "color-mix(in srgb, var(--clr-accent-300) calc(100% * <alpha-value>), transparent)",
400: "color-mix(in srgb, var(--clr-accent-400) calc(100% * <alpha-value>), transparent)",
500: "color-mix(in srgb, var(--clr-accent-500) calc(100% * <alpha-value>), transparent)",
600: "color-mix(in srgb, var(--clr-accent-600) calc(100% * <alpha-value>), transparent)",
700: "color-mix(in srgb, var(--clr-accent-700) calc(100% * <alpha-value>), transparent)",
800: "color-mix(in srgb, var(--clr-accent-800) calc(100% * <alpha-value>), transparent)",
900: "color-mix(in srgb, var(--clr-accent-900) calc(100% * <alpha-value>), transparent)",
950: "color-mix(in srgb, var(--clr-accent-900) calc(100% * <alpha-value>), transparent)",
hover:
"color-mix(in srgb, var(--clr-accent-hover) calc(100% * <alpha-value>), transparent)",
},
mint: "color-mix(in srgb, var(--clr-mint) calc(100% * <alpha-value>), transparent)",
cmyk: {
cyan: "color-mix(in srgb, var(--clr-cyan) calc(100% * <alpha-value>), transparent)",
yellow:
"color-mix(in srgb, var(--clr-yellow) calc(100% * <alpha-value>), transparent)",
magenta:
"color-mix(in srgb, var(--clr-magenta) calc(100% * <alpha-value>), transparent)",
},
spotify: "#1DB965",
},
fontFamily: {
sans: ["var(--font-inter)"],
secondary: ["var(--font-jetbrains-mono)"],
},
fontSize: {
"5xl": ["3rem", "3.5rem"],
"6xl": ["3.75rem", "4.25rem"],
"7xl": ["4.5rem", "4.75rem"],
},
animation: {
bgCenter: "moveBgCircle 10s linear infinite",
"meteor-effect": "meteor 5s linear infinite",
},
keyframes: {
moveBgCircle: {
"0%": {
transform: "translate(-50%,-50%) rotate(0deg)",
},
"50%": {
transform: "translate(-50%,-50%) rotate(180deg)",
},
"100%": {
transform: "translate(-50%,-50%) rotate(360deg)",
},
},
meteor: {
"0%": {
transform: "rotate(215deg) translateX(0)",
opacity: "1",
},
"70%": { opacity: "1" },
"100%": {
transform: "rotate(215deg) translateX(-500px)",
opacity: "0",
},
},
},
},
},
plugins: [
require("tailwindcss-animate"),
fluid({
checkSC144: false,
}),
function ({ matchUtilities, theme, addVariant, e }: any) {
addVariant("pointer-coarse", ({ container, separator }: any) => {
const pointerCoarse = postcss.atRule({
name: "media",
params: "(pointer: coarse)",
});
pointerCoarse.append(container.nodes);
container.append(pointerCoarse);
pointerCoarse.walkRules((rule: any) => {
rule.selector = `.${e(
`pointer-coarse${separator}${rule.selector.slice(1)}`
)}`;
});
});
addVariant("pointer-fine", ({ container, separator }: any) => {
const pointerFine = postcss.atRule({
name: "media",
params: "(pointer: fine)",
});
pointerFine.append(container.nodes);
container.append(pointerFine);
pointerFine.walkRules((rule: any) => {
rule.selector = `.${e(
`pointer-fine${separator}${rule.selector.slice(1)}`
)}`;
});
});
addVariant("pointer-none", ({ container, separator }: any) => {
const pointerNone = postcss.atRule({
name: "media",
params: "(pointer: none)",
});
pointerNone.append(container.nodes);
container.append(pointerNone);
pointerNone.walkRules((rule: any) => {
rule.selector = `.${e(
`pointer-none${separator}${rule.selector.slice(1)}`
)}`;
});
});
addVariant("hover-hover", ({ container, separator }: any) => {
const hoverHover = postcss.atRule({
name: "media",
params: "(hover: hover)",
});
hoverHover.append(container.nodes);
container.append(hoverHover);
hoverHover.walkRules((rule: any) => {
rule.selector = `.${e(
`hover-hover${separator}${rule.selector.slice(1)}`
)}`;
});
});
addVariant("hover-none", ({ container, separator }: any) => {
const hoverNone = postcss.atRule({
name: "media",
params: "(hover: none)",
});
hoverNone.append(container.nodes);
container.append(hoverNone);
hoverNone.walkRules((rule: any) => {
rule.selector = `.${e(
`hover-none${separator}${rule.selector.slice(1)}`
)}`;
});
});
},
],
} satisfies Config;
export default config;
```
Looking through closed issues I see that a similar issue was raised a while back, but adding the safelist option doesn't change anything for me.
https://github.com/barvian/fluid-tailwind/issues/62
关闭于 2025-02-07 3 条评论