Configuring Tailwind theme from Typescript file in Angular

Question

I want to set up the Tailwind theme in .ts files, to take advantage of typing and reuse the defined values in my typescript code, from my Angular services.

I created project with Angular CLI 13.1:

// package.json

{
  "name": "test-project-tailwind",
  "type": "module",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.1",
    "@angular/common": "~13.1.1",
    "@angular/compiler": "~13.1.1",
    "@angular/core": "~13.1.1",
    "@angular/forms": "~13.1.1",
    "@angular/platform-browser": "~13.1.1",
    "@angular/platform-browser-dynamic": "~13.1.1",
    "@angular/router": "~13.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.2",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.1",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "10.4.0",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "postcss": "8.4.5",
    "tailwindcss": "3.0.5",
    "typescript": "~4.5.4"
  }
}

I installed tailwindcss:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

I setup tailwind config :

// tailwind.config.js

import theme from 'src/theme/theme'

module.exports = {
  darkMode: false,
  theme: theme
}

// src/theme/theme.ts

export default {
  colors: {
    blue: 'blue',
    red: 'red'
  },
}

Then I got the following error on ng serve:

An unhandled exception occurred: Must use import to load ES Module: project-path\tailwind.config.js

require() of ES modules is not supported.

require() of project-path\tailwind.config.js from project-path\node_modules\tailwindcss\lib\index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename tailwind.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from project-path\package.json.

Any idea how could I achieve this?

Did you try naming your tailwind.config.js to end in .cjs instead? — Stoobish
– Stoobish, Commented Nov 24, 2021 at 12:51
Are you using require() any where? like in your global css file or theme.ts? — Stoobish
– Stoobish, Commented Nov 24, 2021 at 13:05
No, require() is called from project-path\node_modules\tailwindcss\lib\index.js to load my config file tailwind.config.js. — Guylan DIEU
– Guylan DIEU, Commented Nov 24, 2021 at 13:17

Cameron · Accepted Answer · 2021-12-06 17:20:23Z

0

I had this problem as well and although I tried a couple of things (i.e. using a .cjs file), I didn't have any luck. I finally got this working by simply removing type: module, which was not the most ideal thing. I think I may have explicitly set type: module in my package.json just because I thought it was a best practice, but it's not set by angular itself. If you were to just run ng new, the module type isn't explicitly set (therefore defaults to commonjs).

In my case, I also had to install postcss as tailwind needs at least 8.0 or greater.

answered Dec 6, 2021 at 17:20

Cameron

3,0153 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guylan DIEU Over a year ago

I tried removing type: module but then I just got SyntaxError: Cannot use import statement outside a module in tailwind.config.js` lign 1 when running ng serve. Any idea what I might be missing?

Cameron Over a year ago

I see your config now, you are using import for the src/theme/theme. could you make the src/theme/theme a module.exports and then use var theme = require('src/theme/theme') require instead of using the import?

Collectives™ on Stack Overflow

Configuring Tailwind theme from Typescript file in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related