Giter VIP home page Giter VIP logo

tailwindcss-intellisense's Introduction

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

Installation

Install via the Visual Studio Code Marketplace →

In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.js in your workspace.

Features

Autocomplete

Intelligent suggestions for class names, as well as CSS functions and directives.

Linting

Highlights errors and potential bugs in both your CSS and your markup.

Hover Preview

See the complete CSS for a Tailwind class name by hovering over it.

CSS Syntax Highlighting

Provides syntax definitions so that Tailwind features are highlighted correctly.

Settings

tailwindCSS.includeLanguages

This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. html, css, or javascript):

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

tailwindCSS.emmetCompletions

Enable completions when using Emmet-style syntax, for example div.bg-red-500.uppercase. Default: false

{
  "tailwindCSS.emmetCompletions": true
}

tailwindCSS.colorDecorators

Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.

  • inherit: Color decorators are rendered if editor.colorDecorators is enabled.
  • on: Color decorators are rendered.
  • off: Color decorators are not rendered.

tailwindCSS.validate

Enable linting. Rules can be configured individually using the tailwindcss.lint settings:

  • ignore: disable lint rule entirely
  • warning: rule violations will be considered "warnings," typically represented by a yellow underline
  • error: rule violations will be considered "errors," typically represented by a red underline

tailwindCSS.lint.invalidScreen

Unknown screen name used with the @screen directive. Default: error

tailwindCSS.lint.invalidVariant

Unknown variant name used with the @variants directive. Default: error

tailwindCSS.lint.invalidTailwindDirective

Unknown value used with the @tailwind directive. Default: error

tailwindCSS.lint.invalidApply

Unsupported use of the @apply directive. Default: error

tailwindCSS.lint.invalidConfigPath

Unknown or invalid path used with the theme helper. Default: error

tailwindCSS.lint.cssConflict

Class names on the same HTML element which apply the same CSS property or properties. Default: warning

Troubleshooting

If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:

  • Ensure that you have a Tailwind config file in your workspace and that this is named tailwind.config.js or tailwind.js. Check out the Tailwind documentation for details on creating a config file.
  • Ensure that the tailwindcss module is installed in your workspace, via npm, yarn, or pnpm. Tailwind CSS IntelliSense does not currently support Yarn Plug'n'Play.
  • If you installed tailwindcss or created your config file while your project was already open in Visual Studio Code you may need to reload the editor. You can either restart VS Code entirely, or use the Developer: Reload Window command which can be found in the command palette.

tailwindcss-intellisense's People

Contributors

bradlc avatar danmichaelo avatar dhc02 avatar guillaumebriday avatar ledenis avatar mattwaler avatar nhducit avatar praveenperera avatar wayness avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.