Warning: warn - fluid-tailwind: Fluid extractor not found in your Tailwind config

[olien]

I am encountering the following warning while working with Tailwind CSS:

warn - fluid-tailwind: Fluid extractor not found in your Tailwind config

I’ve tried several solutions without success. Here is my current tailwind.config.js setup:

const { createThemes } = require('tw-colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './theme/private/**/*.{html,js,css,php,json,yml}',
        ...extract().files || [], 
      ],
      safelist: [
        ...extract().safelist || [], 
        { pattern:  /(~)./ }, 
      ],
  theme: {
    screens,
    fontSize,
    container: {
      center: true
    },
    debugScreens: {
      prefix: '',
      selector: '#viewportsize',
      style: {
        boxShadow: 'none',
      },
    },
    extend: {
      fontFamily: {
        'sora': ['"Sora"'],
        'montserrat': ['"Montserrat"'],
      },
    },
  },
  plugins: [
    require('tailwindcss-debug-screens'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    fluid,
    createThemes({
      'default': {
        primary: {
            "50": "#e3e8f0",
            "100": "#c8d1e3",
            "200": "#a0a9cf",
            "300": "#7881bb",
            "400": "#5068a7",
            "500": "#284e93",
            "600": "#1e3d74",
            "700": "#142c55",
            "800": "#0a1b36",
            "900": "#000a17"
          },
          secondary: {
            "50": "#fff9e6",
            "100": "#ffefbf",
            "200": "#ffe69a",
            "300": "#ffdc75",
            "400": "#ffd350",
            "500": "#ffc02b",
            "600": "#e0a321",
            "700": "#b38119",
            "800": "#855f11",
            "900": "#573c09"
          },
          neutral: {
            "50": "#f6f8f9",
            "100": "#eaecee",
            "200": "#d3d6da",
            "300": "#bdc0c6",
            "400": "#9da1a8",
            "500": "#7d828a",
            "600": "#65696d",
            "700": "#4d5054",
            "800": "#35373a",
            "900": "#1d1e20"
          },
          color: {
            "50": "#ffffff",  
            "100": "#f8f9fa", 
            "200": "#e9ecef", 
            "300": "#dee2e6", 
            "400": "#adb5bd", 
            "500": "#000000", 
            "600": "#495057", 
            "700": "#343a40", 
            "800": "#212529", 
            "900": "#121314"  
          }          
      },
      'dark': {
        primary: {
            "50": "#1b2230",
            "100": "#16202d",
            "200": "#121c26",
            "300": "#0e1820",
            "400": "#0a141a",
            "500": "#061014",
            "600": "#040c10",
            "700": "#02080c",
            "800": "#010406",
            "900": "#000203"
          },
          secondary: {
            "50": "#3a2c00",
            "100": "#332800",
            "200": "#2c2400",
            "300": "#251f00",
            "400": "#1e1b00",
            "500": "#181600",
            "600": "#121200",
            "700": "#0c0c00",
            "800": "#060600",
            "900": "#030300"
          },
          neutral: {
            "50": "#1e1e1e",
            "100": "#181818",
            "200": "#131313",
            "300": "#0f0f0f",
            "400": "#0b0b0b",
            "500": "#070707",
            "600": "#050505",
            "700": "#030303",
            "800": "#020202",
            "900": "#010101"
          },
          color: {   
            "50": "#ffffff",
            "100": "#f2f2f2",
            "200": "#e6e6e6",
            "300": "#d9d9d9",
            "400": "#cccccc",
            "500": "#ffffff",
            "600": "#b3b3b3",
            "700": "#a6a6a6",
            "800": "#999999",
            "900": "#8c8c8c"
          }
      },
    }, {
      defaultTheme: {
        light: 'default',
        dark: 'dark',
      }
    })
  ]
}

How can I resolve this warning? Do I need to configure or install anything specific for the fluid extractor to work?

Thank you for your help! 😊

---

my package.json

{
  "private": true,
  "scripts": {
    "start": "mix watch",
    "build": "mix",
    "build:production": "mix --production",
    "standard": "semistandard resources/**/*.js --fix"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.9",
    "@tailwindcss/typography": "^0.5.15",
    "autoprefixer": "^10.4.20",
    "babel-eslint": "^10.1.0",
    "browser-sync-webpack-plugin": "2.3.0",
    "eslint": "^8.38.0",
    "eslint-plugin-import": "^2.27.5",
    "fluid-tailwind": "^1.0.4",
    "laravel-mix": "^6.0.49",
    "laravel-mix-copy-watched": "^2.3.1",
    "postcss": "^8.4.47",
    "semistandard": "^17.0.0",
    "tailwindcss": "^3.4.15",
    "tailwindcss-debug-screens": "^2.2.1",
    "tw-colors": "^3.3.2"
  },
  "overrides": {
    "browser-sync": "^3.0.2"
  },
  "resolutions": {
    "browser-sync": "^3.0.2"
  },
  "dependencies": {
    "@alpinejs/focus": "^3.14.1",
    "@alpinejs/intersect": "^3.14.1",
    "@ryangjchandler/alpine-tooltip": "^2.0.0",
    "alpinejs": "^3.14.3",
    "alpinejs-intersect-class": "^1.0.8"
  }
}

[barvian]

Hi, thanks for posting the config. Can you try this for content and safelist?

content: {
  files: ['./theme/private/**/*.{html,js,css,php,json,yml}'],
  extract
},
safelist: [
  { pattern: /(~)./ }, 
],

[olien]

That Works. Tanks!