question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Example for tailwind directives

See original GitHub issue

I have added

<style>
  :root {
   ...
   // some default css vars
  }

  .form-input,
  .form-select {
    @apply block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm;
  }
</style>

to a _layout.svelte file and somehow the classes are not taken into account. Any idea why? Could you update the sapper example as well? 🤗

I also tried <style global>...</style>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
alexanderniebuhrcommented, Feb 27, 2021

@wiesson the change is not released as a package yet. However, you gut try it with this repo and the examples here. Next release is scheduled later tonight.

0reactions
wiessoncommented, Feb 27, 2021

Hmm, it did not work for me. I have created an example repo -> https://github.com/wiesson/svelte-sapper-windicss/blob/main/src/components/Styles.svelte (but still wrapped with :global())

Read more comments on GitHub >

github_iconTop Results From Across the Web

Functions & Directives - Tailwind CSS
A reference for the custom functions and directives Tailwind exposes to your CSS.
Read more >
How to use @apply directive in Tailwind CSS - LaraInfo
In this section we will see how to use @apply directive in tailwind css. Tailwind @apply directive using for create short and reusable...
Read more >
Functions & Directives - Tailwind CSS
@tailwind. Use the @tailwind directive to insert Tailwind's preflight , utilities and screens styles into your CSS. Here's a full example of how...
Read more >
How to Get Started with TailwindCSS - freeCodeCamp
1. Install package with npm · 2. Add Tailwind to your CSS · 3. Create your config file · 4. Using Tailwind with...
Read more >
Organize your CSS in the Tailwind style with @layer directive
Tailwind provides a @layer directive to help you better organize your CSS. This post is a detailed breakdown of the directive for my...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found