Can't make Fluid for Tailwind work
Hello guys I'm starting a new project using React+Vite+Typescript and Tailwind for styling. I bumped into Fluid for Tailwind (https://fluid.tw/#tailwind-merge) and I was pretty much curious to use but I really cant make it work. I keep having a warning:
"warn - fluid-tailwind: Fluid extractor not found in your Tailwind config".
here is my tailwind.config if can be any helpful:
/** @type {import('tailwindcss').Config} */
const fluidTailwind = require("fluid-tailwind");
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
primary: "#daff6f",
secondary: "#a8aeff",
tertiary: "#e6e6fa",
black: "#161616",
subtext: "#d3d3d3",
secondSubtext: "#717171",
secondaryAccent: "#CDD0ED",
primaryAccent: "#EFFFC3",
},
screens: {
xsm: { max: "650px" },
md: { min: "651px" },
lg: { min: "768px", max: "1023px" },
xl: { min: "1024px", max: "1279px" },
"2xl": { min: "1280px", max: "1535px" },
"3xl": { min: "1536px" },
},
},
},
plugins: [
fluidTailwind({
textSizes: {
sm: "14px",
base: "16px",
lg: "18px",
xl: "20px",
},
}),
],
};
I tried to add and import "extract" like said on the guide but it keeps not working.
Does anyone ever used this plugin? I hope you can help me to fix it, thank you!!!Fluid for Tailwind CSS
Fluid for Tailwind CSS - Build better responsive designs in less code.
Scale utilities smoothly between breakpoints with modern clamp() functions.
0 Replies