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.