Custom config path or support .ts extension

[seahindeniz]

Hi,

Is there a way to specify a custom config file name instead of tailwind.config.js.
For example, I don't like to have JS files in my project, so I use tailwind.config.ts with vanilla ES6 syntax just for shadowing the JS file extension. But in the meantime, I'm loosing intellisense feature of the extension. So in this case, I think having a config for specifying path is kind of needed.

Alternatively, these lines can have ts extension just to cover the issue.

tailwindcss-intellisense/packages/vscode-tailwindcss/src/extension.ts

Line 40 in 898347c

const CONFIG_FILE_GLOB = '{tailwind,tailwind.config}.{js,cjs}'

tailwindcss-intellisense/packages/tailwindcss-language-server/src/server.ts

Line 75 in 6e092dd

const CONFIG_FILE_GLOB = '{tailwind,tailwind.config}.{js,cjs}'

[bradlc]

Hey @seahindeniz. I am open to this idea but I am curious: how do you use the tailwind.config.ts file with Tailwind itself?

[seahindeniz]

Hmm, well, I'm using Webpack and for the css loader, I'm using postcss-loader. Under postcss options, I simply using tailwindcss as a plugin and I specify file path for config file like the following

// webpack.config.ts

rules: [
  {
    test: /\.(?:s[ac]|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      { loader: 'css-loader', options: { importLoaders: 1 } },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [
              'postcss-preset-env',
              ['tailwindcss', { config: './tailwind.config.ts' }],
              'autoprefixer',
            ],
          },
        },
      },
    ],
  },
],

For the config file, I simply using it like the following:

// tailwind.config.ts

// !-- Do not use TS and import/export keywords since this config file will not be
// resolved as a TS file or a module file --!
module.exports = {
  purge: ['**/src/**/*.{[tj]s?(x),html}'],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Either the postcss or tailwindcss doesn't complaing about how I use it if I don't use TS or module file specific keywords/expressions in the config file.
I know, it's not ideal however, it a tricky solution for my case.

[DianaOlympos]

as a side note, i would really appreciate this feature too. I use tailwind but as part of an elixir/phoenix framework. This means that my tailwind config is in an assets directory, not at the root of my workspace. Being able to specify the place the config is in would enable me to use this, instead of having it crash all the time.

[seahindeniz]

Hey @bradlc, have you given thoughts for this so far?

[ahuggins]

I saw in the docs:

In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js in your workspace.

And my situation is this... I have a React component library package that is used on multiple applications, so each individual application won't have a tailwind.config.js file...but I would love to be able to use the config from the library I made in the application.

I sort of was able to get this working with creating a tailwind.config.js file in the application with contents:

module.exports = require('./node_modules/{your}/{package}/tailwind.config.js');

As long as in the library you include the tailwind.config.js file in your npm build.

Then I had to install Tailwind and any extensions in the devDependencies in the application and was able to get autocomplete based on the library tailwind.config.js.

Posting this in case it helps anyone here if they are trying something similar...or maybe it's just helpful in some way.

[alvis]

@bradlc I have the same request! In my case, I am using tailwind with gatsby in typescript.
Gatsby doesn't have any tailwind.config.js in the build so @ahuggins's hack doesn't work. ._.

[sgarcia-dev]

+1 on this request if possible @bradlc 🙏 We have multiple tailwind config files in our project, and being able to set the tailwind config directory would be amazing.

[alvis]

For anyone who comes across this issue, my workaround is to import tailwind.config.ts in postcss.config.ts like below. Then both of them can be in .ts extension. Ofcoz, the caveat is that you also need a supported loader (e.g. postcss-load-config) for processing postcss.config.ts.

import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';

import tailwindcssConfig from './tailwind.config';

export default { plugins: [autoprefixer, tailwindcss(tailwindcssConfig)] };

[doug-shontz]

+1 on this for me as well. We use tailwind in a monorepo setup where the master tailwind.config is not at the "project" root level...it's at the workspace root level and we just reference that during the build and it works just fine. But we get no intellisense because the tailwind config is in the "wrong place". Being able to specify this at a VS Code workspace level would be amazing.

My suggestion would be to make the tailwind config a variable for the extension which, if not filled out, could default to the normal glob that it does...but could be specified. That way it could be checked in as part of VSCode's settings.json file.

[megalithic]

as a side note, i would really appreciate this feature too. I use tailwind but as part of an elixir/phoenix framework. This means that my tailwind config is in an assets directory, not at the root of my workspace. Being able to specify the place the config is in would enable me to use this, instead of having it crash all the time.

@DianaOlympos I'm having this same issue -- same scenario in an elixir phoenix app -- grateful you've pointed it out. Thanks!

[dgonzalezr]

When working with .ts files in Typescript projects we can include types, therefore the following becomes a valid use case of setting up the configuration file for TW:

Or even further I could split the theme object and import then from different modules, like:

The scenario above works perfectly and all gets compiled as expected, TW does not complain about it, it is just that we lose the autocompletion feature. So yes, supporting .ts configuration file is one step, but also validating it. In the case above the extension will fail with a message like:

PS: I've tested the solution provided in the PO here and compiled the extension as a .vsix installable, but it fails when using ES6 modules.

[megalithic]

@DianaOlympos did you ever get past this with your elixir phoenix project? you and i have a similar issue: #421 (comment)

[DianaOlympos]

@megalithic no i did not. Sadly.

[megalithic]

To be clear; tailwindcss-language-server is working in css files when used with the @apply directive; it's just not working properly for *.heex files.

[cmitjans-at-wiris]

Hello, is there any update on this issue? I'm also looking forward to be able to set my tailwindcss config in a .ts

[mjuniper]

I've just run into this too. Would be great if it would work with my tailwind.config.ts file.

[bradlc]

Hey all. v0.8.3 is available now with a new tailwindCSS.experimental.configFile setting. You can use this setting to manually specify the Tailwind config file(s) that should be used to provide IntelliSense.

If your project has a single config file:

"tailwindCSS.experimental.configFile": ".config/tailwind.config.js"

If your project has multiple config files you can use an object where each key is a config file path and the value is a glob (or array of globs) representing the files where that config applies:

"tailwindCSS.experimental.configFile": {
  "themes/simple/tailwind.config.js": "themes/simple/**",
  "themes/neon/tailwind.config.js": "themes/neon/**"
}

If anyone has any feedback feel free to ping me in a discussion, and for bugs please open an issue on this repo 👍

Please note that this setting is experimental and may be changed or removed at any time.

[inoas]

@bradlc thank you so much!

[sgarcia-dev]

@bradlc thanks man, you're amazing!

[dgonzalezr]

@bradlc does this change support the .ts config file? Because I just tested it and I get no IntelliSense for Tailwind 😞

[bradlc]

@bradlc does this change support the .ts config file?

Yes, as long as you don't have any TypeScript or ESM syntax in the file.

[dgonzalezr]

Yes, as long as you don't have any TypeScript or ESM syntax in the file.

So @bradlc basically, I cannot set my config in this way?

or like:

right? that would be the point (from my personal experience) of using a .ts config file 🤔

[magoz]

Hi, does anybody know how or where to define "tailwindCSS.experimental.configFile": ".config/tailwind.config.js" if using Neovim?

I tried creating the .vscode/settings.json file, but it doesn't seem to be picked by the LSP in Neovim. Not sure how workspaces work in Neovim.

I have a monorepo using Turborepo and my tailwind config is in packages/tailwind/tailwind.config.js.

Thanks!

[EinfachHans]

@dgonzalezr did you found a solution? I don't see this as "resolved" if i can specify a .ts file in th enew config path option but it does not work if it contains typescript syntax, because: well that's the point^^

[dgonzalezr]

@EinfachHans Actually yes, it is working for me with Tailwind CSS v3, you can check this repo here.

[khuezy]

If anyone else is having problems, this may help:
instead of creating a second tailwind.config.ts for a specific package, move the config over to the postcss.config.js's plugins.tailwindcss.