Incompatibility with @nuxtjs/tailwindcss - tailwind.config.ts

[BenjaminOddou]

Hello 👋,

I noticed that this plugin wasn't supporting typescript config file for tailwind. I am using a typescript config file for tailwind as described in the documentation of @nuxtjs/tailwindcss. The plugin output this error :

["ERROR" - 4:57:10 PM] Error formatting document.
/Users/User/Documents/nuxt-app/tailwind.config.ts:1
(function (exports, require, module, __filename, __dirname) { import { Config } from 'tailwindcss'
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
	at new Script (node:vm:100:7)
	at u._compile (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:1173)
	at Module._extensions..js (node:internal/modules/cjs/loader:1220:10)
	at Module.load (node:internal/modules/cjs/loader:1035:32)
	at Module._load (node:internal/modules/cjs/loader:876:12)
	at c._load (node:electron/js2c/asar_bundle:5:13343)
	at r._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:116:14565)
	at v._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:111:65015)
	at E._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:111:64383)
	at Module.require (node:internal/modules/cjs/loader:1059:19)
	at nx.exports (/Users/User/Documents/nuxt-app/node_modules/prettier-plugin-tailwindcss/dist/index.js:134:2647)
	at Object.parse (/Users/User/Documents/nuxt-app/node_modules/prettier-plugin-tailwindcss/dist/index.js:146:4138)
	at Object.parse (/Users/User/Documents/nuxt-app/node_modules/prettier/index.js:7334:23)
	at coreFormat (/Users/User/Documents/nuxt-app/node_modules/prettier/index.js:8645:18)
	at formatWithCursor2 (/Users/User/Documents/nuxt-app/node_modules/prettier/index.js:8837:18)
	at /Users/User/Documents/nuxt-app/node_modules/prettier/index.js:37229:12
	at Object.format (/Users/User/Documents/nuxt-app/node_modules/prettier/index.js:37243:12)
	at t.default.format (/Users/User/.vscode/extensions/esbenp.prettier-vscode-9.9.0/dist/extension.js:1:14565)
	at async t.PrettierEditProvider.provideEdits (/Users/User/.vscode/extensions/esbenp.prettier-vscode-9.9.0/dist/extension.js:1:11259)
	at async H.provideDocumentFormattingEdits (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:92:45661)

[thecrypticace]

This is because we do not support typescript configuration files. Nuxt is transpiling the config file itself and passing the config object to Tailwind CSS instead of us loading the config file. This is something we do want to eventually look at supporting but there are things we need to do in Tailwind itself, the prettier plugin, and intellisense to support this.

For more information you can read my comment here: tailwindlabs/tailwindcss#7327 (comment)

[iBobik]

Nuxt compiles Tailwind config file, so let's just use it:

// prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  tailwindConfig: './.nuxt/tailwind.config.cjs',
}