Is there way to enable Tailwind CSS for embedded styles in Svelte, or React?

[saneef]

Here is a sample Svelte component file:

<style lang="postcss">
  label {
    @apply relative block pl-6 my-2;
  }

  .wrapper {
    @apply absolute left-0 inset-y-0 flex items-center;
  }
</style>

<script>
  export let checked;
  export let label;
</script>

<label>
  {label}
  <div class="wrapper"><input type="checkbox" bind:checked /></div>
</label>

Is there any setting I can change to enable for TailwindCSS syntax highlighting on embedded CSS code?

[deathaxe]

The general solution is to modify the embedding syntax.

It's pretty simple to inerhit from an existing syntax and "replace" required contexts with ST4. It is not very convinient though.

Option 1 (modify Svelte)

To make use of TailwindCSS in Svelte you can create your own syntax variant in User path.

Content of Packages/User/Svelte (Tailwind).sublime-syntax:

%YAML 1.2
---

# See http://www.sublimetext.com/docs/syntax.html
name: Svelte (Tailwind CSS)
scope: text.html.svelte
extends: Packages/Svelte/Svelte.sublime-syntax
file_extensions:
  - svlt
  - svelte

first_line_match: (?i)<(!DOCTYPE\s*)?html

contexts:

  style-lang-decider-lang:
    - meta_prepend: true
    - match: (?i)(?=postcss(?!{unquoted_attribute_value})|\'postcss\'|"postcss")
      set:
        - - meta_content_scope: meta.tag.style.begin.html
          - include: style-common
          - match: '>'
            scope: punctuation.definition.tag.end.html
            set:
              - include: style-close-tag
              - match: ''
                embed_scope: source.css.tailwind.embedded.html
                embed: scope:source.css.tailwind
                escape: (?i)(?=(?:-->\s*)?</style)
        - tag-generic-attribute-meta
        - tag-generic-attribute-value

Afterwards you'd need to reassign all your files to Svelte (Tailwind).

Option 2 (Alias Tailwind CSS)

Svelte already embedds source.postcss scope, so you could make use of it here in case you don't have PostCSS package installed.

Just create an alias syntax of Tailwind as follows.

Packages/User/Tailwind (PostCSS).sublime-syntax

%YAML 1.2
---
scope: source.postcss
version: 2
extends: Packages/Tailwind CSS/Tailwind CSS.sublime-syntax

You may need to restart ST twice in case A File Icon is installed, to make it work. (1. restart: A File Icon removes its plain text alias, 2. restart: ST loads your alias and uses it in embeds).

Please note: This syntax definition doesn't cover whole PostCSS feature sets.

[saneef]

Thanks a lot @deathaxe! The first option is works! It is also more suited to my need.