Nova

Extensions


Readme

Tailwind CSS Extension for Panic's Nova Code Editor

Provides Tailwind CSS completions and a documentation sidebar for Panic's macOS code editor, Nova.

Now supports Tailwind CSS Version 3!

The sidebar offers access to the Tailwind classes from within Nova. It makes it easy to learn about available Tailwind classes and access documentation!

Thank you to Tailwind Labs, Adam Wathan, and Steve Schoger for their contribution to the development community, including Tailwind CSS, Headless UI, and Tailwind UI. This extension is not created, maintained, or endorsed by Tailwind Labs. To request features or report bugs, please see the section below.

Prerequisites

There are no prerequisites for this extension, other than Panic's Nova code editor for macOS.

Usage

Enable the extension in the extension library within Nova. The extension can be toggled on/off at any time using the "Toggle TailwindCSS" command available in the command palette.

Configuration

The extension does not require a local installation of Tailwind, therefore, it will also function when using Tailwind via CDN.

The Tailwind CSS extension will always provide default Tailwind CSS classes. However, for projects where Tailwind has been customized, the extension will perform these these actions in order: 1. Attempt to read the Tailwind configuration file specified in the workspace preferences (see screenshot below). 2. Search the workspace for a 'tailwind.config.js' file and attempt to read it.

As of version 4.1, the extension only supports customized extended colors. Support for additional customizations is planned.

It is not necessary to include a Tailwind installation in the project, nor include a 'tailwind.config.js' file for default class suggestions.

Workspace Configuration

To specify a Tailwind configuration file, go to the workspace preferences, select Tailwind CSS, and choose a file. Simply delete the path if you wish to for the extension to automatically find and include the 'tailwind.config.js' file again.

Planned Future Features

  • Improved support for Tailwind CSS customization.

Report a Bug or Feature Request

To report a bug or request a feature, please add an issue to the GitHub repository. Thanks!


Changelog

Version 4.3

  • Added support for Astro.
  • Restored support for Liquid.

Version 4.2.2

  • Fixed multiple tailwind configuration file error caused by detection of tailwind.config.js files in the node_modules directory.

Version 4.2.1

  • Fixed minor configuration error.

Version 4.2

  • Added "Toggle TailwindCSS" command to the Nova command palette. Thanks to Emran (https://github.com/EmranMR) for this contribution!

Version 4.1

  • Improved when autocompletions are suggested by preventing suggestions outside of HTML class attributes, CSS files, or single and double quotes in other files, such as ERB.
  • Fixed an issue causing improper insertion of Tailwind directives.

Version 4.0

  • Added support for Tailwind version 3.0.15
  • Updated Tailwind class icons to represent style classes, pseudo-classes and pseudo-elements.
  • Added support for Tailwind functions and directives.

Version 3.0.4

  • Added completion support in css, sass, and scss files.
  • Fixed a bug preventing Tailwind class completions on systems not supporting newer JavaScript versions.

Version 3.0.3

  • Fixed a bug preventing autocompletions from being offered immediately after an opening quote within a HTML class attribute.

Version 3.0.2

  • Changed the "whitespace-no-wrap" Tailwind class to the correct name, "whitespace-nowrap".

Version 3.0.1

  • Fixed bug causing inconsistent reloading of the Tailwind classes when the Tailwind config file is saved.

Version 3.0

  • Added sidebar for viewing available Tailwind classes.
  • Added support for Tailwind version 2.2.4.
  • Added support for tailwind.config.js customization of extended colors.
  • Improved Tailwind completion support in Vue.js projects by disallowing completions in script blocks and allowing completions in a style block when the @apply directive is used.
  • Removed support for older versions of Tailwind to focus on current and future extension feature enhancements.

Version 2.2

  • Added support for jade and pug files.

Version 2.1

  • Added support for embedded Elixir files.

Version 2.0.1

  • Fixed issue with causing some classes to display undefined values.

Version 2.0

  • Added Tailwind CSS 2.0 support.
  • Added support for changing the Tailwind CSS version in the workspace preferences.
  • Increased the quality of the extension icon.

Version 1.3

  • Added support for Liquid files.

Version 1.2

  • Added support for Twig, Blade, and Svelte files.

Version 1.1

  • Fixed issue causing extension to stop responding when at the beginning of a line.
  • Added a minimum supported Nova 2.0 runtime requirement. Nova 2.0 addresses an issue that can cause less accurate autocomplete suggestions.

Version 1.0

Initial release


License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.