tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.75k stars 183 forks source link

How to sort tailwind classes #876

Closed talhameer closed 8 months ago

talhameer commented 8 months ago

What version of VS Code are you using? v1.84.0

What version of Tailwind CSS IntelliSense are you using? v0.10.2

What version of Tailwind CSS are you using? v3.3.2

What package manager are you using? npm

What operating system are you using? macOS

Tailwind config

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        primary: "#006BD7",
        brown: "#FFBC58",
        gray: "#E0E2E7",
        lightGray: "#F6F5F5",
        red: "#FF6868",
        lightBlue: "#F3F9FF",
      },
    },
  },
  plugins: [],
};

Describe your issue I'm working on a front-end project after some time. I'm unable to find the class sort setting in Tailwind Intellisense.

adamwathan commented 8 months ago

Hey! There's a "Sort selection" command you can use to sort the classes in a highlighted string:

image

But generally our Prettier plugin is what you want to use for sorting:

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

Hope that helps!