I'm checking out the Theme Configuration in Tailwind CSS. It looks really powerful, but I'm having trouble using my design tokens within the config.
I have my tokens distributed via npm, but don't know how I can include them in my tailwind.config.js. Is there any way to include them like this? Should I use a different approach?
// What I'm trying to achieve
import DesignTokens from "@my-design-system/tokens";
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
colors: {
blue: DesignTokens.COLOR_BLUE_700,
},
},
plugins: [],
};
Error I get
SyntaxError: Cannot use import statement outside a module
Any info will be greatly appreciated.
Thanks
As stated in the comments, using the import is mixing module formats.
I got it working with the following configuration.
// I have tokens available in many different formats thanks to Style Dictionary. Here we use JSON.
const DesignTokens = require("@my-design-system/tokens.json");
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
colors: {
blue: {
700: DesignTokens["color-blue-700"],
},
},
},
plugins: [],
};