Starting help needed. I can't get it to work.

[olien]

here are my package.json and my tailwind.config.js

  "private": true,
  "scripts": {
    "start": "mix watch",
    "build": "mix",
    "build:production": "mix --production"
  },
  "devDependencies": {
    "autoprefixer": "10.4.19",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.29.1",
    "browser-sync-webpack-plugin": "2.3.0",
    "eslint": "^8.6.0",
    "eslint-plugin-import": "^2.28.1",
    "laravel-mix": "^6.0.49",
    "laravel-mix-copy-watched": "^2.3.1",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "fluid-tailwind": "^0.2.2",    
    "tw-colors": "^3.0.3"
  },
  "dependencies": {
    "@alpinejs/focus": "^3.12.3",
    "@alpinejs/intersect": "^3.12.3",
    "@ryangjchandler/alpine-tooltip": "^1.2.0",
    "@tailwindcss/forms": "0.5.7",
    "@tailwindcss/typography": "^0.5.9",
    "alpinejs": "^3.12.3",
    "alpinejs-intersect-class": "^1.0.6",
    "tailwindcss-debug-screens": "^2.2.1"
  }
}

import fluid from 'fluid-tailwind';
import fluid, { extract } from 'fluid-tailwind';

module.exports = {
    mode: 'jit',
    darkMode: 'class',
    content: {
        files: ['./theme/private/**/*'],
        extract,
    },     
    theme: {
        container: {
            center: true
        },
        debugScreens: {
            prefix: '',
            selector: '#viewportsize',
            ignore: ['dark'],
            style: {
                boxShadow: 'none',
            },
        },
        extend: {
            fontFamily: {
                'montserrat': ['"Montserrat"'],
            },
        },
    },
    plugins: [
        fluid,
        require('tailwindcss-debug-screens'),
        require('@tailwindcss/typography'),
        require('fluid-tailwind'),
        require('@tailwindcss/forms'),
        createThemes({
            'default': {
                primary: {
                    "50": "#576688",
                    "100": "#4d5c7e",
                    "200": "#435274",
                    "300": "#39486a",
                    "400": "#2f3e60",
                    "500": "#253456",
                    "600": "#1b2a4c",
                    "700": "#112042",
                    "800": "#071638",
                    "900": "#000c2e"
                },
                secondary: {
                    "50": "#fff06e",
                    "100": "#ffe664",
                    "200": "#ffdc5a",
                    "300": "#fbd250",
                    "400": "#f1c846",
                    "500": "#e7be3c",
                    "600": "#ddb432",
                    "700": "#d3aa28",
                    "800": "#c9a01e",
                    "900": "#bf9614"
                },
                neutral: {
                    '50': '#f7f7f7',
                    '100': '#efefee',
                    '200': '#d6d7d5',
                    '300': '#bebfbc',
                    '400': '#8d8f8a',
                    '500': '#5C5F58',
                    '600': '#53564f',
                    '700': '#454742',
                    '800': '#373935',
                    '900': '#2d2f2b'
                },
            },
            'darktheme': {
                primary: {
                    "500": "#0f0"
                },
                secondary: {
                    "500": "#f00"
                },
                neutral: {
                    '200': '#ff0'
                },
            },
        })
    ]
}

Maybe you have a moment to take a look at it.

Thanks Oliver

[barvian]

Hey, thanks for posting. I was able to get your config working by using the default screens and fontSize mentioned in step 4 here (step 4 was previously marked as optional, but I just removed that word to hopefully make it clearer):

- import fluid, { extract } from 'fluid-tailwind';
+ import fluid, { extract, screens, fontSize } from "fluid-tailwind";
import { createThemes } from "tw-colors";
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: {
    files: ["index.html"],
    extract,
  },
  theme: {
+    screens,
+    fontSize,
    container: {
      center: true,
    },
    debugScreens: {
      prefix: "",
      selector: "#viewportsize",
      ignore: ["dark"],
      style: {
        boxShadow: "none",
      },
    },
    extend: {
      fontFamily: {
        montserrat: ['"Montserrat"'],
      },
    },
  },
  plugins: [
    fluid,
    require("tailwindcss-debug-screens"),
    require("@tailwindcss/typography"),
    require("fluid-tailwind"),
    require("@tailwindcss/forms"),
    createThemes({
      default: {
        primary: {
          50: "#576688",
          100: "#4d5c7e",
          200: "#435274",
          300: "#39486a",
          400: "#2f3e60",
          500: "#253456",
          600: "#1b2a4c",
          700: "#112042",
          800: "#071638",
          900: "#000c2e",
        },
        secondary: {
          50: "#fff06e",
          100: "#ffe664",
          200: "#ffdc5a",
          300: "#fbd250",
          400: "#f1c846",
          500: "#e7be3c",
          600: "#ddb432",
          700: "#d3aa28",
          800: "#c9a01e",
          900: "#bf9614",
        },
        neutral: {
          50: "#f7f7f7",
          100: "#efefee",
          200: "#d6d7d5",
          300: "#bebfbc",
          400: "#8d8f8a",
          500: "#5C5F58",
          600: "#53564f",
          700: "#454742",
          800: "#373935",
          900: "#2d2f2b",
        },
      },
      darktheme: {
        primary: {
          500: "#0f0",
        },
        secondary: {
          500: "#f00",
        },
        neutral: {
          200: "#ff0",
        },
      },
    }),
  ],
};

Does this work for your set-up?

[olien]

Hello Maxwell, that works. Thanks alot!

[possionthefish1]

Hello, I know this is closed but I had the same problem and this helped me find the solution. Thank you for the solution Mr.barvianm, and you too Mr.olien. And just as well thank you very much for the plugin.

[olien]

👍