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")],
};

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.

'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

Uuiuxphil I wanna refacor my entire app from daisyUI to shadcn UI but I can't really chang...

barry•4/10/23, 10:35 AM

What happens when adding export {}

uiuxphilOP•4/10/23, 10:35 AM

nothing

barry•4/10/23, 10:35 AM

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

uiuxphilOP•4/10/23, 10:35 AM

yes

barry•4/10/23, 10:35 AM

Well look at your content parameter

barry•4/10/23, 10:35 AM

I am guessing you're not using the app directory or have a components folder

barry•4/10/23, 10:36 AM

I'm guessing you have a src folder

barry•4/10/23, 10:36 AM

["src/**/*.{ts,tsx}"]["src/**/*.{ts,tsx}"]

uiuxphilOP•4/10/23, 10:36 AM

no, I actually do use the app directory

uiuxphilOP•4/10/23, 10:36 AM

wait i have a brain fart

barry•4/10/23, 10:37 AM

And it's all inside a src folder

uiuxphilOP•4/10/23, 10:37 AM

yeah

uiuxphilOP•4/10/23, 10:37 AM

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•4/10/23, 10:38 AM

Changing to src doesn't work?

uiuxphilOP•4/10/23, 10:38 AM

it does

uiuxphilOP•4/10/23, 10:38 AM

damn thx

uiuxphilOP•4/10/23, 10:39 AM

but it still should only be on app and components where I have my redix primitives

uiuxphilOP•4/10/23, 10:39 AM

maybe i should specify src/app and src/components

barry•4/10/23, 10:39 AM

Welp it applies to any ts / tsx files inside src

barry•4/10/23, 10:39 AM

I don't see what gains you would gain specifying the 2 folders but sure

barry•4/10/23, 10:40 AM

Even tailwind docs just show src/**/*src/**/*

uiuxphilOP•4/10/23, 10:40 AM

tbh i'm building portfolio to finally get a job

uiuxphilOP•4/10/23, 10:40 AM

so yeah i'm all about clean code too

uiuxphilOP•4/10/23, 10:40 AM

and just the high quality of my code, I dont wanna left anything un-professional behind

nexxel•4/10/23, 11:30 AM

is your config file .ts @PTS

nexxel•4/10/23, 11:30 AM

if yes you can't use module.exports

nexxel•4/10/23, 11:30 AM

thats cjs way

nexxel•4/10/23, 11:31 AM

you can't use require as well

nexxel•4/10/23, 11:34 AM

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;

nexxel•4/10/23, 11:34 AM

this is how you do it

Can't import defaultTheme from tailwind.

Similar Threads

Similar Threads

Similar Threads