Closed stfnx closed 1 year ago
This is already supported. I have a folder structure that looks like this:
.
├── a
│ ├── a-config.cjs
│ ├── index.jsx
│ └── styles.css
├── b
│ ├── b-config.cjs
│ └── index.jsx
├── package.json
├── package-lock.json
├── postcss.config.js
├── README.md
├── tailwind-example.sublime-project
└── webpack.config.js
I've two folders that contain two tailwind configuration files.
The first folder is a
and the tailwind config file is named a-config.cjs
.
And a second folder b
and a tailwind config file is named b-config.cjs
.
NOTE: I used a different name for the configuration file instead of the default
tailwind.config.js
, just for demo purposes.
a-confgi.cjs
looks like this:
module.exports = {
theme: {
colors: {
primary: '#ff0000'
}
}
}
b-confgi.cjs
looks like this:
module.exports = {
theme: {
colors: {
secondary: '#5c6ac4'
}
}
}
To tell what tailwind config is related to what folder, we can read the setting description that you provided.
So based on what we read, we now know that for the above example the setting will look like this:
"tailwindCSS.experimental.configFile": {
"a/a-config.cjs": "a/**",
"b/b-config.cjs": "b/**"
}
Note: If you have one config file, you can also specify it like this:
"tailwindCSS.experimental.configFile": "./a/a-config.cjs"
We can set the "tailwindCSS.experimental.configFile"
in one of two places:
a) LSP-tailwindcss.sublime-settings file
b) In a sublime project file
a) From the command palette, select Preferences: LSP-tailwindcss Settings
, and paste the setting:
{
"settings": {
"tailwindCSS.experimental.configFile": {
"a/a-config.cjs": "a/**",
"b/b-config.cjs": "b/**"
}
}
}
b) in a sublime-project file set the following:
{
"folders":
[
{
"path": "."
}
],
"settings": {
"LSP": {
"LSP-tailwindcss": {
"settings": {
// this is valid if you need one config
// "tailwindCSS.experimental.configFile": "./a/a-config.cjs"
// this is also valid if you need one config
// "tailwindCSS.experimental.configFile": "./b/b-config.cjs",
// this is valid if you need multiple configs
"tailwindCSS.experimental.configFile": {
"a/a-config.cjs": "a/**",
"b/b-config.cjs": "b/**"
}
}
}
}
}
}
And it should work:
I do have my TailwindCSS config in a sub-directory with a different name. LSP doesn't recognize it and therefore doesn't work. As a workaround I symlink my config to the expected location.
This could probably be fixed by supporting the
tailwindCSS.experimental.configFile
option as described here.