Can't import defaultTheme from tailwind.

I wanna refacor my entire app from daisyUI to shadcn UI but I can't really change anything in tailwind config config:

const { fontFamily } = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

const { fontFamily } = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

issue:

'tailwind.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

'tailwind.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

when I change to import { } from ' ' tailwind doesn't work at all. adding export { } doesnt work -- my tailwind still doesn't work. body with bg-black doesnt change body's background to black help :P

13 Replies

barry•2y ago

What happens when adding export {}

uiuxphilOP•2y ago

nothing

barry•2y ago

So there's no errors Tailwind just doesn't work?

uiuxphilOP•2y ago

yes

barry•2y ago

Well look at your content parameter I am guessing you're not using the app directory or have a components folder I'm guessing you have a src folder ["src/**/*.{ts,tsx}"]

uiuxphilOP•2y ago

no, I actually do use the app directory wait i have a brain fart

barry•2y ago

And it's all inside a src folder

uiuxphilOP•2y ago

yeah here's my layout.tsx Maybe i've done something wrong

"use client";
import { api } from "~/utils/api";
import "~/styles/globals.css";

function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-black">
        <h1>test test</h1>
      </body>
    </html>
  );
}

export default api.withTRPC(RootLayout);

"use client";
import { api } from "~/utils/api";
import "~/styles/globals.css";

function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-black">
        <h1>test test</h1>
      </body>
    </html>
  );
}

export default api.withTRPC(RootLayout);

barry•2y ago

Changing to src doesn't work?

uiuxphilOP•2y ago

it does damn thx but it still should only be on app and components where I have my redix primitives maybe i should specify src/app and src/components

barry•2y ago

Welp it applies to any ts / tsx files inside src I don't see what gains you would gain specifying the 2 folders but sure Even tailwind docs just show src/**/*

uiuxphilOP•2y ago

tbh i'm building portfolio to finally get a job so yeah i'm all about clean code too and just the high quality of my code, I dont wanna left anything un-professional behind

nexxel•2y ago

is your config file .ts @PTS if yes you can't use module.exports thats cjs way you can't use require as well

import type { Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

import type { Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

this is how you do it

Gaming

Programming

Can't import defaultTheme from tailwind.