feat: add tailwind.config.ts support

docs/content/1.getting-started/1.setup.md

@@ -47,10 +47,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.
 
@@ -62,6 +62,22 @@ You can configure the paths in the [module options](/getting-started/options).
 
 Learn more about overwriting the Tailwind configuration in the [Tailwind Config](/tailwind/config) section.
 
+## TypeScript (optional)
+
+Officially Tailwind config files are plain JavaScript, however with this module, you can optionally use a TypeScript file for your config.
+
+To do so, rename `tailwind.config.js` to `tailwind.config.ts` and use the types from the tailwindcss module.
+
+```ts [tailwind.config.ts]
+import { Config } from 'tailwindcss'
+
+export default <Config> {
+ theme: {
+ extend: {}
+ },
+}
+```
+
 ## Options
 
 You can customize the module's behavior by using the `tailwindcss` property in `nuxt.config`:

playground/tailwind.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from 'tailwindcss'
+
+export default <Config> {
+ theme: {
+ },
+}

src/module.ts

@@ -29,7 +29,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 { Config } from 'tailwindcss'
+
+export default ({ srcDir }): Config => ({
  theme: {
  extend: {}
  },