Is there a way to use tailwind.config.ts instead?

[finnmerlett]

I want to keep chunks of my theme in ts files elsewhere in my project. I want to be able to access them directly with type hinting but also want to be able to import them into my tailwind config file (at the moment you can only 'require' CommonJs files into the tailwind.config.js file). I wouldn't even need it to be typescript necessarily (though that would be nice), I just want to be able to import in es6 modules style. Is there any way to set this up?

[aranoe]

+1

[lightyen]

Use swc or esbuild to achieve this:

// tailwind.config.js

const { register } = require("@swc-node/register/register")
const { readDefaultTsConfig } = require("@swc-node/register/read-default-tsconfig")
const path = require("path")
register(readDefaultTsConfig(path.join(__dirname, "tsconfig.json")))
module.exports = require("./tailwind.config.ts").default

// tailwind.config.ts

export default {
  plugins: [],
  theme: {
    extend: {},
  },
} // as import("tailwindcss/types").Config

[bluefire2121]

tailwind.config.ts

import type { Config } from "tailwindcss"

export default {
  plugins: [],
  theme: {
    extend: {},
  },
} satisfies Config