Configuring Tailwind theme from Typescript file in Angular

Viewed 1019

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?

1 Answers

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.

Related