feat: add tailwind.config.ts support

docs/content/2.setup.md

@@ -56,10 +56,10 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie
 
 ## Tailwind Files
 
-When running `nuxt dev`, this module will look for these two files:
+When running `nuxt dev`, this module will look for these files:
 
 - `./assets/css/tailwind.css`
-- `./tailwind.config.js`
+- `./tailwind.config.{js,ts}`
 
 If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.
 
@@ -71,6 +71,33 @@ You can configure the paths in the [module options](/options).
 
 Learn more about overwriting the Tailwind configuration in the [Tailwind Config](/tailwind/config) section.
 
+## TypeScript
+
+The module supports TypeScript Tailwind config, simply rename your `tailwind.config.js` to `tailwind.config.ts`.
+
+A `defineTailwindConfig` decorator function which accepts `TailwindConfig` from [@types/tailwindcss](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/tailwindcss).
+
+```ts
+import { defineTailwindConfig } from '@nuxtjs/tailwindcss/config'
+
+export default defineTailwindConfig({
+ theme: {
+ extend: {}
+ },
+})
+```
+
+Note: You may need to enable `allowSyntheticDefaultImports` in your `tsconfig.json` if you have errors importing from Tailwind.
+
+```json
+{
+ "extends": "./.nuxt/tsconfig.json",
+ "compilerOptions": {
+ "allowSyntheticDefaultImports": true
+ }
+}
+```
+
 ## Options
 
 You can customize the module's behavior by using the `tailwindcss` property in `nuxt.config`:

package.json

@@ -8,10 +8,33 @@
  ".": {
  "require": "./dist/module.cjs",
  "import": "./dist/module.mjs"
+ },
+ "./config": {
+ "require": "./dist/config/index.cjs",
+ "import": "./dist/config/index.mjs",
+ "types": "./dist/config/index.d.ts"
  }
  },
  "main": "./dist/module.cjs",
  "types": "./dist/types.d.ts",
+ "unbuild": {
+ "entries": [
+ {
+ "input": "src/config",
+ "outDir": "dist/config",
+ "builder": "mkdist",
+ "format":"cjs",
+ "ext": "cjs"
+ },
+ {
+ "input": "src/config",
+ "outDir": "dist/config",
+ "builder": "mkdist",
+ "format":"mjs",
+ "ext": "mjs"
+ }
+ ]
+ },
  "files": [
  "dist"
  ],

playground/tailwind.config.ts

@@ -0,0 +1,5 @@
+import { defineTailwindConfig } from '../src/config'
+
+export default defineTailwindConfig({
+ theme: {}
+})

src/config/index.ts

@@ -0,0 +1,5 @@
+import { TailwindConfig } from 'tailwindcss/tailwind-config'
+
+export function defineTailwindConfig (config: TailwindConfig): TailwindConfig {
+ return config
+}

src/module.ts

@@ -30,7 +30,7 @@ export default defineNuxtModule({
  configKey: 'tailwindcss'
  },
  defaults: nuxt => ({
- configPath: 'tailwind.config.js',
+ configPath: 'tailwind.config',
  cssPath: join(nuxt.options.dir.assets, 'css/tailwind.css'),
  config: defaultTailwindConfig(nuxt.options),
  viewer: true,

src/tailwind.config.ts

@@ -1,5 +1,7 @@
 // Learn more at https://tailwindcss.com/docs/configuration
-export default ({ srcDir }) => ({
+import { TailwindConfig } from 'tailwindcss/tailwind-config'
+
+export default ({ srcDir }): TailwindConfig => ({
  theme: {
  extend: {}
  },