svelteでtailwind cssが効かない時にやってみてほしいこと

こんにちは、フクロウです。
今回はsvelteでtailwindcssを読み込もうとしたときに、ちょっと困ったことが起きたので、書いておきます。
どなたかの悩みが解消されますように...

キッカケ

フロントエンドでWEBのレイアウトやデザインが苦手だったので、tailwindcssを使用しようと考えてハマってしまった。。。

どんなことにハマったのか？

svelteの基本的なファイル構造は以下ですよね？

<script>
</script>

<main>
</main>

<style>
</style>

ここで、tailwindcssを別のcssファイルに記載して読み込もうとした。
layoutファイルのstyleタグの中で、@importで指定しても全体に適用されないため、解決方法探してました。

解決方法

scriptタグの中でtailwindcssをimportしたcssファイルを指定すればいいだけでした。