55
Svelte + Typescript + Tailwind
Coming from the
Tailwind is a superb CSS framework that can be powerful in bringing your ideas to life in a responsive way 😋.
Angular world back to Javascript can sometimes feel lackluster. The power of types is too much to resist. Lately, I've been playing around with React and Svelte. To be fair, I am liking Svelte a lot for a small single-page website. Combining these two was a must for me, So here is a post penning down the steps you will need to make your Svelte project run on TypeScript.Tailwind is a superb CSS framework that can be powerful in bringing your ideas to life in a responsive way 😋.
Clone the svelte repo to your directory with:
npx degit sveltejs/template your-projectNow change the current directory to
your-project and run this command to convert your current JavaScript project to TypeScript, and install packagescd your-project
node .\scripts\setupTypeScript.js
npm iInstall required packages by running the command:
npm i tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9To add
tailwind.config.js to your project:npx tailwindcss init tailwind.config.jsHead over to
tailwind.config.js file and add this future property at bottomfuture: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},To purge unnecessary classes in production modify
purge property to:purge: {
content: ["./src/**/*.svelte"],
enabled: isProduction, // disable purge in dev
},You won't want purging to be enabled in dev mode, to identify we can use the
ROLLUP_WATCH flag.const isProduction = !process.env.ROLLUP_WATCH;To enable tailwindss during
dev and production builds update preprocess property topreprocess: sveltePreprocess({
sourceMap: !production,
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
}),You can add this to your
App.svelte or optionally this can also be done by creating a new svelte component and then importing it in App.svelte<style global lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>Now you're ready to rock🤘, run your Svelte project with:
npm run dev55