Setup TailwindCSS on Svelte & Snowpack
source link: https://markshust.com/2020/11/01/setup-tailwindcss-svelte-snowpack/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Setup TailwindCSS on Svelte & Snowpack
November 01, 2020 · 1 min read · Edit on GitHub
It seemed fairly easy to install TailwindCSS on a fresh Svelte install that was using the Snowpack builder, but following a few different online tutorials lead me down a few black holes.
Luckily, it is quite easy if you keep Postfix and any other build tools out of the process. Here is a very simple way to implement TailwindCSS into a Svelte install that uses Snowpack as the builder.
The first step is to install TailwindCSS with npm:
npm install tailwindcssNext, you’ll need to create the standard TailwindCSS CSS import file at src/tailwind.css with the contents:
@import 'tailwindcss/dist/base.css';
@import 'tailwindcss/dist/components.css';
@import 'tailwindcss/dist/utilities.css';Finally, open src/App.svelte, or whatever component you are using for the global layout in Svelte, and import the CSS file within it’s script tag:
<script>
import {onMount} from 'svelte';
import './tailwind.css'; let count = 0;
...That’s it! You’re now free to use all of the TailwindCSS classes to your hearts content, and enjoy the immediate hot reloading capabilities of Snowpack 😍.
Are you a Magento geek?
Signup for my newsletter and I'll let you know about Magento-related blogs, courses & more.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK