Brunobkr/llama.cpp_AlgMor24_github

1<img src="https://raw.githubusercontent.com/tailwindlabs/prettier-plugin-tailwindcss/main/.github/banner.jpg" alt="prettier-plugin-tailwindcss" />2 3A [Prettier v3+](https://prettier.io/) plugin for Tailwind CSS v3.0+ that automatically sorts classes based on [our recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted).4 5## Installation6 7To get started, install `prettier-plugin-tailwindcss` as a dev-dependency:8 9```sh10npm install -D prettier prettier-plugin-tailwindcss11```12 13Then add the plugin to your [Prettier configuration](https://prettier.io/docs/en/configuration.html):14 15```json516// .prettierrc17{18  "plugins": ["prettier-plugin-tailwindcss"]19}20```21 22When using a JavaScript config, you can import the types for IntelliSense:23 24```js25// prettier.config.js26 27/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */28export default {29  plugins: ["prettier-plugin-tailwindcss"],30}31```32 33## Upgrading to v0.5.x34 35As of v0.5.x, this plugin now requires Prettier v3 and is ESM-only. This means it cannot be loaded via `require()`. For more information see our [upgrade guide](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/207#issuecomment-1698071122).36 37## Options38 39### Specifying your Tailwind stylesheet path (Tailwind CSS v4+)40 41When using Tailwind CSS v4 you must specify your CSS file entry point, which includes your theme, custom utilities, and other Tailwind configuration options. To do this, use the `tailwindStylesheet` option in your Prettier configuration.42 43Note that paths are resolved relative to the Prettier configuration file.44 45```json546// .prettierrc47{48  "tailwindStylesheet": "./resources/css/app.css"49}50```51 52### Specifying your Tailwind JavaScript config path (Tailwind CSS v3)53 54To ensure that the class sorting takes into consideration any of your project's Tailwind customizations, it needs access to your [Tailwind configuration file](https://tailwindcss.com/docs/configuration) (`tailwind.config.js`).55 56By default the plugin will look for this file in the same directory as your Prettier configuration file. However, if your Tailwind configuration is somewhere else, you can specify this using the `tailwindConfig` option in your Prettier configuration.57 58Note that paths are resolved relative to the Prettier configuration file.59 60```json561// .prettierrc62{63  "tailwindConfig": "./styles/tailwind.config.js"64}65```66 67If a local configuration file cannot be found the plugin will fallback to the default Tailwind configuration.68 69## Sorting non-standard attributes70 71By default this plugin sorts classes in the `class` attribute, any framework-specific equivalents like `className`, `:class`, `[ngClass]`, and any Tailwind `@apply` directives.72 73You can sort additional attributes using the `tailwindAttributes` option, which takes an array of attribute names:74 75```json576// .prettierrc77{78  "tailwindAttributes": ["myClassList"]79}80```81 82With this configuration, any classes found in the `myClassList` attribute will be sorted:83 84```jsx85function MyButton({ children }) {86  return (87    <button myClassList="rounded bg-blue-500 px-4 py-2 text-base text-white">88      {children}89    </button>90  );91}92```93 94### Using regex patterns95 96You can also use regular expressions to match multiple attributes. Patterns should be enclosed in forward slashes. Note that JS regex literals are not supported with Prettier:97 98```json599// .prettierrc100{101  "tailwindAttributes": ["myClassList", "/data-.*/"]102}103```104 105This example will sort classes in the `myClassList` attribute as well as any attribute starting with `data-`:106 107```jsx108function MyButton({ children }) {109  return (110    <button111      myClassList="rounded bg-blue-500 px-4 py-2 text-base text-white"112      data-theme="dark:bg-gray-800 bg-white"113      data-classes="flex items-center"114    >115      {children}116    </button>117  );118}119```120 121## Sorting classes in function calls122 123In addition to sorting classes in attributes, you can also sort classes in strings provided to function calls. This is useful when working with libraries like [clsx](https://github.com/lukeed/clsx) or [cva](https://cva.style/).124 125You can sort classes in function calls using the `tailwindFunctions` option, which takes a list of function names:126 127```json5128// .prettierrc129{130  "tailwindFunctions": ["clsx"]131}132```133 134With this configuration, any classes in `clsx()` function calls will be sorted:135 136```jsx137import clsx from 'clsx'138 139function MyButton({ isHovering, children }) {140  let classes = clsx(141    'rounded bg-blue-500 px-4 py-2 text-base text-white',142    {143      'bg-blue-700 text-gray-100': isHovering,144    },145  )146 147  return (148    <button className={classes}>149      {children}150    </button>151  )152}153```154 155## Sorting classes in template literals156 157This plugin also enables sorting of classes in tagged template literals.158 159You can sort classes in template literals using the `tailwindFunctions` option, which takes a list of function names:160 161```json5162// .prettierrc163{164  "tailwindFunctions": ["tw"],165}166```167 168With this configuration, any classes in template literals tagged with `tw` will automatically be sorted:169 170```jsx171import { View, Text } from 'react-native'172import tw from 'twrnc'173 174function MyScreen() {175  return (176    <View style={tw`bg-white p-4 dark:bg-black`}>177      <Text style={tw`text-md text-black dark:text-white`}>Hello World</Text>178    </View>179  )180}181```182 183This feature can be used with third-party libraries like `twrnc` or you can create your own tagged template by defining this "identity" function:184 185```js186const tw = (strings, ...values) => String.raw({ raw: strings }, ...values)187```188 189Once added, tag your strings with the function and the plugin will sort them:190 191```js192const mySortedClasses = tw`bg-white p-4 dark:bg-black`193```194 195## Public API196 197If you want to use the Tailwind class sorting logic outside of Prettier, import from the198`sorter` entrypoint:199 200```js201import { createSorter } from 'prettier-plugin-tailwindcss/sorter'202 203let sorter = await createSorter({204  base: '/path/to/project',205  stylesheetPath: './app.css',206})207 208// Sort HTML class attributes (space-separated strings)209let sorted = sorter.sortClassAttributes([210  'sm:bg-tomato bg-red-500',211  'p-4 m-2'212])213// Returns: ['bg-red-500 sm:bg-tomato', 'm-2 p-4']214 215// Sort class lists (arrays of class names)216let sortedLists = sorter.sortClassLists([217  ['sm:bg-tomato', 'bg-red-500'],218  ['p-4', 'm-2']219])220// Returns: [['bg-red-500', 'sm:bg-tomato'], ['m-2', 'p-4']]221```222 223### API Options224 225The `createSorter` function accepts the following options:226 227- **`base`** (optional): The directory used to resolve relative file paths. Defaults to the current working directory.228- **`filepath`** (optional): The path to the file being formatted. When provided, Tailwind CSS is resolved relative to this path.229- **`configPath`** (optional): Path to the Tailwind CSS config file (v3). Paths are resolved relative to `base`.230- **`stylesheetPath`** (optional): Path to the CSS stylesheet used by Tailwind CSS (v4+). Paths are resolved relative to `base`.231- **`preserveWhitespace`** (optional): Whether to preserve whitespace around classes. Default: `false`.232- **`preserveDuplicates`** (optional): Whether to preserve duplicate classes. Default: `false`.233 234### Sorter Methods235 236The sorter object returned by `createSorter` has two methods:237 238- **`sortClassAttributes(classes: string[]): string[]`**239  Sorts one or more HTML class attributes. Each element should be a space-separated string of class names (like the value of an HTML `class` attribute).240 241- **`sortClassLists(classes: string[][]): (string | null)[][]`**242  Sorts one or more class lists. Each element should be an array of individual class names. When removing duplicates (default behavior), duplicate classes are replaced with `null` in the output.243 244### Using regex patterns245 246Like the `tailwindAttributes` option, the `tailwindFunctions` option also supports regular expressions to match multiple function names. Patterns should be enclosed in forward slashes. Note that JS regex literals are not supported with Prettier.247 248## Preserving whitespace249 250This plugin automatically removes unnecessary whitespace between classes to ensure consistent formatting. If you prefer to preserve whitespace, you can use the `tailwindPreserveWhitespace` option:251 252```json5253// .prettierrc254{255  "tailwindPreserveWhitespace": true,256}257```258 259With this configuration, any whitespace surrounding classes will be preserved:260 261```jsx262import clsx from 'clsx'263 264function MyButton({ isHovering, children }) {265  return (266    <button className=" rounded  bg-blue-500 px-4  py-2     text-base text-white ">267      {children}268    </button>269  )270}271```272 273## Preserving duplicate classes274 275This plugin automatically removes duplicate classes from your class lists. However, this can cause issues in some templating languages, like Fluid or Blade, where we can't distinguish between classes and the templating syntax.276 277If removing duplicate classes is causing issues in your project, you can use the `tailwindPreserveDuplicates` option to disable this behavior:278 279```json5280// .prettierrc281{282  "tailwindPreserveDuplicates": true,283}284```285 286With this configuration, anything we perceive as duplicate classes will be preserved:287 288```html289<div290  class="291    {f:if(condition: isCompact, then: 'grid-cols-3', else: 'grid-cols-5')}292    {f:if(condition: isDark, then: 'bg-black/50', else: 'bg-white/50')}293    grid gap-4 p-4294  "295>296</div>297```298 299## Compatibility with other Prettier plugins300 301This plugin uses Prettier APIs that can only be used by one plugin at a time, making it incompatible with other Prettier plugins implemented the same way. To solve this we've added explicit per-plugin workarounds that enable compatibility with the following Prettier plugins:302 303- `@ianvs/prettier-plugin-sort-imports`304- `@prettier/plugin-pug`305- `@shopify/prettier-plugin-liquid`306- `@trivago/prettier-plugin-sort-imports`307- `prettier-plugin-astro`308- `prettier-plugin-css-order`309- `prettier-plugin-jsdoc`310- `prettier-plugin-multiline-arrays`311- `prettier-plugin-organize-attributes`312- `prettier-plugin-organize-imports`313- `prettier-plugin-svelte`314- `prettier-plugin-sort-imports`315 316One limitation with this approach is that `prettier-plugin-tailwindcss` *must* be loaded last.317 318```json5319// .prettierrc320{321  // ..322  "plugins": [323    "prettier-plugin-svelte",324    "prettier-plugin-organize-imports",325    "prettier-plugin-tailwindcss" // MUST come last326  ]327}328```329