npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@yaegassy/coc-tailwindcss3

v0.5.19

Published

Intelligent Tailwind CSS tooling for coc.nvim

Downloads

685

Readme

coc-tailwindcss3

fork from vscode-tailwindcss and headwind

Intelligent Tailwind CSS tooling for coc.nvim.

Install

:CocInstall @yaegassy/coc-tailwindcss3

scoped packages

Prepare

Create tailwindCSS configuration in your project.

this extension need the configuration exists in your project

npx tailwindcss init

TIPS

coc-tailwindcss3 may not work for some projects such as monorepo or depending on how Vim/Neovim is started. Try one of the following methods

Open the tailwindcss configuration file

Open the tailwind.config.js or tailwind.config.cjs file that exists in your project.

workspaceFolders

workspaceFolders may not have been properly recognized. To make coc.nvim recognize workspaceFolders correctly, you can set b:coc_root_patterns in .vimrc/init.vim

Example for html filetype:

  au FileType html let b:coc_root_patterns = ['.git', '.env', 'tailwind.config.js', 'tailwind.config.cjs']

Also, workspaceFolders can be adjusted manually. Set the directory where tailwind.config.js or tailwind.config.cjs exists.

See the coc.nvim wiki for more information.

Configuration options

  • tailwindCSS.enable: Enable coc-tailwindcss3 extension, default: true
  • tailwindCSS.trace.server: Trace level of tailwindCSS language server, default: off
  • tailwindCSS.custom.serverPath: Custom path to server module. If there is no setting, the built-in module will be used, default: ""
  • tailwindCSS.emmetCompletions: Enable class name completions when using Emmet-style syntax, for example div.bg-red-500.uppercase, default: false
  • tailwindCSS.includeLanguages: Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language. E.g.: {"plaintext": "html"}, default: { "eelixir": "html", "elixir": "html", "eruby": "html", "html.twig": "html" }
  • tailwindCSS.files.exclude: Configure glob patterns to exclude from all IntelliSense features. Inherits all glob patterns from the #files.exclude# setting, default: ["**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**"]
  • tailwindCSS.classAttributes: The HTML attributes for which to provide class completions, hover previews, linting etc, default: ["class", "className", "ngClass"]
  • tailwindCSS.suggestions: Enable autocomplete suggestions, default: true
  • tailwindCSS.hovers: Enable hovers, default: true
  • tailwindCSS.codeActions: Enable code actions, default: true
  • tailwindCSS.validate: Enable linting. Rules can be configured individually using the tailwindcss.lint.* settings, default: true
  • tailwindCSS.lint.cssConflict: Class names on the same HTML element which apply the same CSS property or properties, valid option ["ignore", "warning", "error"], default: warning
  • tailwindCSS.lint.invalidApply: Unsupported use of the @apply directive, valid option ["ignore", "warning", "error"], default: error
  • tailwindCSS.lint.invalidScreen: Unknown screen name used with the @screen directive, valid option ["ignore", "warning", "error"], default: error
  • tailwindCSS.lint.invalidVariant: Unknown variant name used with the @variants directive, valid option ["ignore", "warning", "error"], default: error
  • tailwindCSS.lint.invalidConfigPath: Unknown or invalid path used with the theme helper, valid option ["ignore", "warning", "error"], default: error
  • tailwindCSS.lint.invalidTailwindDirective: Unknown value used with the @tailwind directive, valid option ["ignore", "warning", "error"], default: error
  • tailwindCSS.lint.recommendedVariantOrder: Class variants not in the recommended order (applies in JIT mode only), valid option ["ignore", "warning", "error"], default: error
  • tailwindCSS.experimental.classRegex: ...
  • tailwindCSS.inspectPort: Enable the Node.js inspector agent for the language server and listen on the specified port, default: null
  • tailwindCSS.headwind.defaultSortOrder: Sort order: A string array that determines the default sort order.
    • Check the "Configuration" section of package.json for default values.
  • tailwindCSS.headwind.classRegex: An object with language IDs as keys and their values determining the regex to search for Tailwind CSS classes.
    • Check the "Configuration" section of package.json for default values.
  • tailwindCSS.headwind.runOnSave: A flag that controls whether or not Headwind will sort your Tailwind CSS classes on save, default: false
  • tailwindCSS.headwind.removeDuplicates: A flag that controls whether or not Headwind will remove duplicate Tailwind CSS classes, default: true
  • tailwindCSS.headwind.prependCustomClasses: A flag that controls whether or not Headwind will move custom CSS classes before (true) or after (false) the Tailwind CSS classes, default: false
  • tailwindCSS.headwind.customTailwindPrefix: If the Tailwind Prefix function is used, this can be specified here (e.g. tw-), default: ""

Commands

  • tailwindCSS.showOutput: Tailwind CSS: Show Output
  • tailwindCSS.headwind.sortTailwindClasses: Headwind: Sort Tailwind CSS Classes

Custom Server Path

tailwindCSS.custom.serverPath: Custom path to server module. If there is no setting, the built-in module will be used, default: ""

This setting allows you to use the tailwind's language server module installed in any location.

Usage Example 1 (Use extensions installed in VSCode)

setting:

{
  "tailwindCSS.custom.serverPath": "/path/to/.vscode/extensions/bradlc.vscode-tailwindcss-0.12.3/dist/tailwindServer.js
}

Usage Example 2 (npm)

prepare:

npm i -g @tailwindcss/language-server

or insiders verson

npm i -g @tailwindcss/language-server@insiders

setting:

{
  "tailwindCSS.custom.serverPath": "/path/to/.nvm/versions/node/v20.15.0/bin/tailwindcss-language-server"
}

Thanks

License

MIT


This extension is built with create-coc-extension