TailwindCss Support

[duhnunes]

Hi,

Is there any way to make it compatible, with tailwindcss? I tried putting it in the settings, but nothing happened:

"colorize.languages": [
  "javascript",
  "typescript",
  "tailwindcss",
  "jsx",
  "tsx",
  "json",
],
"colorize.include": [
  "**/*.css",
  "**/*.scss",
  "**/*.sass",
  "**/*.less",
  "**/*.styl",
  "**/*.ts",
  "**/*.tsx",
  "**/*.json",
],

Maybe some setting in tailwind.config.js? I didn't find anything related when searching

Cheers, DuH

[JeremiahRanen7]

Hi , the below might help you to solve the issue: 🚀 To ensure compatibility with Tailwind CSS using the settings in your settings.json , follow these steps and considerations:

1. Ensure Tailwind CSS is Installed and Configured Correctly Make sure Tailwind CSS is properly installed and configured in your project. Your tailwind.config.js should look something like this:

module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Check VS Code Extensions Ensure you have the necessary VS Code extensions installed:

Tailwind CSS IntelliSense: Provides autocomplete and linting for Tailwind CSS classes. Color Highlight or Colorize: Helps highlight colors in your code.

3. Update VS Code Settings Your settings.json should include the languages and files you want to colorize. Here is an updated version of your settings:

{
  "colorize.languages": [
    "javascript",
    "typescript",
    "tailwindcss",
    "jsx",
    "tsx",
    "json",
    "html",
    "css",
    "scss",
    "sass"
  ],
  "colorize.include": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "**/*.styl",
    "**/*.ts",
    "**/*.tsx",
    "**/*.json",
    "**/*.html",
    "**/*.jsx",
    "**/*.js"
  ],
  "tailwindCSS.emmetCompletions": true
}

4. Enable Tailwind CSS Class Name Colorization If you are using the Tailwind CSS IntelliSense extension, ensure that class name colorization is enabled:

{
  "tailwindCSS.colorDecorators": true
}

5. Restart VS Code After making these changes, restart VS Code to ensure all settings are applied correctly.

6. Add Custom Colors in Tailwind Config If you're using custom colors in your Tailwind configuration, make sure they are defined in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#123456',
        anotherColor: '#abcdef',
      },
    },
  },
}

I hope this would be helpful for you. ✨