Add type annotations to the tailwind.config.js file (#8493)

* add type annotation to the config by default

* use `@type {import('tailwindcss').Config}` instead

Author: RobinMalfait

integrations/tailwindcss-cli/tests/cli.test.js

@@ -441,46 +441,6 @@ describe('Init command', () => {
     // multiple keys in `theme` exists. However it loads `tailwindcss/colors`
     // which doesn't exists in this context.
     expect((await readOutputFile('../full.config.js')).split('\n').length).toBeGreaterThan(50)
-
-    expect(await readOutputFile('../full.config.js')).not.toContain(
-      `/** @type {import('tailwindcss/types').Config} */`
-    )
-  })
-
-  test('--types', async () => {
-    cleanupFile('simple.config.js')
-
-    let { combined } = await $(`${EXECUTABLE} init simple.config.js --types`)
-
-    expect(combined).toMatchInlineSnapshot(`
-      "
-      Created Tailwind CSS config file: simple.config.js
-      "
-    `)
-
-    expect(await readOutputFile('../simple.config.js')).toContain(
-      `/** @type {import('tailwindcss/types').Config} */`
-    )
-  })
-
-  test('--full --types', async () => {
-    cleanupFile('full.config.js')
-
-    let { combined } = await $(`${EXECUTABLE} init full.config.js --full --types`)
-
-    expect(combined).toMatchInlineSnapshot(`
-      "
-      Created Tailwind CSS config file: full.config.js
-      "
-    `)
-
-    // Not a clean way to test this. We could require the file and verify that
-    // multiple keys in `theme` exists. However it loads `tailwindcss/colors`
-    // which doesn't exists in this context.
-    expect((await readOutputFile('../full.config.js')).split('\n').length).toBeGreaterThan(50)
-    expect(await readOutputFile('../full.config.js')).toContain(
-      `/** @type {import('tailwindcss/types').Config} */`
-    )
   })
 
   test('--postcss', async () => {
@@ -513,7 +473,6 @@ describe('Init command', () => {
         Options:
            -f, --full               Initialize a full \`tailwind.config.js\` file
            -p, --postcss            Initialize a \`postcss.config.js\` file
-               --types              Add TypeScript types for the \`tailwind.config.js\` file
            -h, --help               Display usage information
       `)
     )
@@ -542,7 +501,6 @@ describe('Init command', () => {
         Options:
            -f, --full               Initialize a full \`tailwind.config.cjs\` file
            -p, --postcss            Initialize a \`postcss.config.cjs\` file
-               --types              Add TypeScript types for the \`tailwind.config.cjs\` file
            -h, --help               Display usage information
       `)
     )
@@ -576,10 +534,6 @@ describe('Init command', () => {
     // Not a clean way to test this.
     expect(await readOutputFile('../tailwind.config.cjs')).toContain('module.exports =')
 
-    expect(await readOutputFile('../tailwind.config.cjs')).not.toContain(
-      `/** @type {import('tailwindcss/types').Config} */`
-    )
-
     await writeInputFile('../package.json', pkg)
   })
 })

src/cli.js

@@ -183,10 +183,6 @@ let commands = {
     args: {
       '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
       '--postcss': { type: Boolean, description: `Initialize a \`${configs.postcss}\` file` },
-      '--types': {
-        type: Boolean,
-        description: `Add TypeScript types for the \`${configs.tailwind}\` file`,
-      },
       '-f': '--full',
       '-p': '--postcss',
     },
@@ -245,7 +241,7 @@ if (
   help({
     usage: [
       'tailwindcss [--input input.css] [--output output.css] [--watch] [options...]',
-      'tailwindcss init [--full] [--postcss] [--types] [options...]',
+      'tailwindcss init [--full] [--postcss] [options...]',
     ],
     commands: Object.keys(commands)
       .filter((command) => command !== 'build')
@@ -372,13 +368,6 @@ function init() {
       'utf8'
     )
 
-    if (args['--types']) {
-      let typesHeading = "/** @type {import('tailwindcss/types').Config} */"
-      stubFile =
-        stubFile.replace(`module.exports = `, `${typesHeading}\nconst config = `) +
-        '\nmodule.exports = config'
-    }
-
     // Change colors import
     stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
 

stubs/defaultConfig.stub.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
   presets: [],

stubs/simpleConfig.stub.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
   theme: {

types.d.ts

@@ -1 +1 @@
-declare namespace tailwindcss {}
+export type { Config } from './config.d'