Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite: Support Tailwind in Svelte <style> blocks #14151

Merged
merged 1 commit into from
Nov 8, 2024
Merged

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Aug 8, 2024

Closes #13305

This PR adds registers a Svelte preprocessor, used by the Svelte Vite plugin, to run Tailwind CSS for styles inside the <style> block, this enables users to use Tailwind CSS features like @apply from inside Svelte components:

<script>
  let name = 'world'
</script>
<h1 class="foo underline">Hello {name}!</h1>
<style global>
  @import 'tailwindcss/utilities';
  @import 'tailwindcss/theme' theme(reference);
  @import './components.css';
</style>

Test Plan

I've added integration tests to validate this works as expected. Furthermore I've used the tailwindcss-playgrounds SvelteKit project to ensure this works in an end-to-end setup:

Screenshot 2024-11-08 at 14 45 31

@philipp-spiess philipp-spiess force-pushed the feat/vite-svelte branch 2 times, most recently from e56dd06 to 46288d7 Compare August 8, 2024 16:32
@philipp-spiess philipp-spiess marked this pull request as ready for review August 9, 2024 09:59
@philipp-spiess philipp-spiess marked this pull request as draft August 9, 2024 09:59
@philipp-spiess philipp-spiess force-pushed the feat/vite-svelte branch 6 times, most recently from afa8545 to 6dae4d0 Compare September 5, 2024 12:47
@philipp-spiess philipp-spiess force-pushed the feat/vite-svelte branch 3 times, most recently from 6b36ceb to 8a0cc56 Compare November 8, 2024 13:46
@philipp-spiess philipp-spiess marked this pull request as ready for review November 8, 2024 13:46
@philipp-spiess philipp-spiess requested a review from a team as a code owner November 8, 2024 13:46
@RobinMalfait RobinMalfait merged commit c72c83f into next Nov 8, 2024
1 check passed
@RobinMalfait RobinMalfait deleted the feat/vite-svelte branch November 8, 2024 19:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[v4] @apply not effected (SvelteKit, Vite)
3 participants