defaultTheme is not defined using Tailwind CSS

Question

I was working on project where I used React, Next.js with Tailwind CSS, and I did some customization in styling, like used react-slick for slider, and I applied custom CSS to react-slick slider classes and made slider as I want to... but meanwhile I am trying to apply default custom fonts to my entire project. In that case, I made some changes in the file of

File tailwind.config.js

theme: {
  fontFamily: {
    customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
  },
  extend: {},
},

After that, I got a compile error:

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/slick-carousel/slick/slick-theme.css

ReferenceError: defaultTheme is not defined

My Tailwind CSS Config.js file for reference

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
    },
    extend: {
      fontFamily: {
        customfontname: ['Segoe UI',
                         'Helvetica Neue',
                         'Arial',
                         'sans-serif',
                         ...defaultTheme.fontFamily.customfontname],
      },
    }
  },
  plugins: [],
};

This is the code of people who trying to help me, but I getting the same error as I mentioned...

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  mode: "jit",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      customfontname: [
        "Segoe UI",
        "Helvetica Neue",
        "Arial",
        "sans-serif",
        ...defaultTheme.fontFamily.customfontname,
      ],
    },
    extend: {},
  },
  plugins: [],
};

there is this line `const defaultTheme = require('tailwindcss/defaultTheme')` in [tailwind's doc](https://tailwindcss.com/docs/theme#customizing-the-default-theme). do you have this line in your `tailwind.config.js`? — Layhout, Jan 12 '23 at 08:13
@Layhout please check my config file for reference I have added it. — Jason0011, Jan 12 '23 at 08:18
maybe something to do with the tailwind version. i see you have `mode: "jit",`. the latest tailwind version uses `jit` by default. — Layhout, Jan 12 '23 at 09:29
i suggest you should apply you custom font inside your `global.css` instead of `tailwind.config.js` since i also did it that way. — Layhout, Jan 12 '23 at 09:31

score 2 · Answer 1 · edited Jan 17 '23 at 01:50

2

Add your customfontname inside extend of your theme

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {     //  Add it inside this 
     fontFamily: {
      customfontname: ['Segoe UI', 
                       'Helvetica Neue', 
                       'Arial',
                       'sans-serif',
                       /*...*/ defaultTheme.fontFamily.customfontname],
      },
    }
  }
}

edited Jan 17 '23 at 01:50

Peter Mortensen

30,738
21
105
131

answered Jan 14 '23 at 13:14

krishnaacharyaa

14,953
4
49
88

Hi, still getting same error. – Jason0011 Jan 16 '23 at 07:20
Have you added the first line ? defaultTheme = require('tailwindcss/defaultTheme') – krishnaacharyaa Jan 16 '23 at 07:21
yes, i added as its mention. – Jason0011 Jan 16 '23 at 07:22
You are still getting `defaultTheme` not defined ?? It is strange! – krishnaacharyaa Jan 16 '23 at 07:26
yes, still same error.. – Jason0011 Jan 16 '23 at 07:34
Hey, I was able to solve the issue by including the import statement just below the `@type` line. – Avik Mar 15 '23 at 17:46
@Avik can you pls show ur code what u did let me check.. – Jason0011 Mar 19 '23 at 17:14
1

@Jason0011 I just added the `const defaultTheme = require('tailwindcss/defaultTheme')` after the `/** @type {import('tailwindcss').Config} */` line. And it worked. – Avik Mar 20 '23 at 15:44
1

If you have already tried this, it would be great if you could create a new boilerplate using the `nextjs-tailwind` template and transfer your files to that new folder. I have faced this kind of situation before! Trust me, that's the best option. – Avik Mar 20 '23 at 15:50
( TypeError: defaultTheme.fontFamily.customfontname is not iterable ) I got this error now @Avik and how to create a boilerplate? – Jason0011 Mar 21 '23 at 05:57
1

`npx create-next-app --tailwind with-tailwindcss-app` – Avik Mar 21 '23 at 18:43

defaultTheme is not defined using Tailwind CSS

File tailwind.config.js

My Tailwind CSS Config.js file for reference

1 Answers1