I am working on an Angular 17 app that uses Tailwind for styling.
This app references an Angular package that I also created, which exports a const that store config for colors:
// In package:
export const myColors = {
'customcolor': {
200: "#...",
...
}
}
When I try to use it in my application Tailwind config file like this:
// In my app:
import type {Config} from 'tailwindcss'
import {myColors} from "@me/my-package";
export default {
content: [
"./src/**/*.{html,ts}"
],
theme: {
colors: myColors
}
}
I have an error coming from Angular :
X [ERROR] The injectable 'PlatformNavigation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.
Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping. [plugin angular-sass]
Is there a way to get a list of colors for a Tailwind config file from a package?
I tried to use presets as described in Tailwind docs:
// In package:
export const myPreset = {
theme: {
colors: {
'customcolor': {
200: "#...",
...
}
}
}
}
// In my app:
import type {Config} from 'tailwindcss'
// import {myColors} from "@me/my-package";
import {myPreset} from "@me/my-package";
export default {
presets: [myPreset],
content: [
"./src/**/*.{html,ts}"
],
theme: {
// colors: myColors
}
}
But it did not work.
I also tried to add the line import "@angular/compiler";
at the top of my application main.ts
file (like it is explained in the error I get), but it did not work either.