Media queries dont work

[roycw]

Guys using tailwind 4 and media queries dont work at all
"hidden md:block w-full flex border-b border-border items-center p-4 shadow-lg bg-background gap-4"
Th div is always hidden.

Where can i even start to look ?
Everything else is working good

[wongjn]

Seems to be working in this Tailwind Play which would suggest it is something particular to your project. Consider providing a git repo that reproduces the unexpected behavior.

[roycw]

yes i am a long time tailwind user. using tialwind 4... not sure what can go wrong. i do not have an tialwind config and using a naked vite config. with tailwind css (the classes works well). dont have any other deps. anywhere else ic an look for the media query specifci issue ?

[wongjn]

You can run a compilation with DEBUG=* environment variable. This will output a tailwind-*.log file. You can then see if Tailwind is scanning the file that contains the code. If not, then you would need to explicitly register it as a source. Otherwise, consider providing a git repo that reproduces the issue and we can take a look for you.

[roycw]

so im pretty sure its a purge issue.
im using tialwind 4 and a tailwind config js. but it ihnk vite is not loadin it ? here is my vite config

import { defineConfig } from "vite";
import path from "path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [react(), tailwindcss(), svgr()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  optimizeDeps: {
    include: [
      '@monaco-editor/react',
    ],
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          monaco: ['@monaco-editor/react'],
        },
      },
    },
  },
});

module.exports = {
safelist: ["bg-info", "group-hover:block"],
content: ["./index.html", ".src/", "/src/**/.{js,ts,jsx,tsx,css}"],
purge: ["./src//*.html", "./src//*.{js, jsx, ts, tsx,css}"],
// ... other config options
plugins: [
require("@tailwindcss/forms"),
require("tailwindcss-motion"),

],
};

[wongjn]

Tailwind v4 does not really use the JavaScript configuration as it did in v3. Regardless, the automatic source detection should be enough to scan the right files for Tailwind class names.

You can try running git init in the root of the project if it is not in a git repository.

Otherwise, you can run a compilation with DEBUG=* environment variable. This will output a tailwind-*.log file. You can then see if Tailwind is scanning the file that contains the code. If not, then you would need to explicitly register it as a source. Otherwise, consider providing a git repo that reproduces the issue and we can take a look for you.

[roycw]

thanks one last question as i keep debuging when im in my local env.... where are the actual tailwind styles..... are they in the pacakge and they will be purged suring the build.. i dont see it in any of my css files

[wongjn]

If by package, you mean a npm package installed in node_modules, you would need to explicitly register it as a source.