feat: added tailwind css support

package.json

@@ -14,13 +14,16 @@
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@types/semver": "^7.5.2",
+		"autoprefixer": "^10.4.17",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.35",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"semver": "^7.5.4",
 		"svelte": "^4.0.5",
+		"tailwindcss": "^3.4.1",
 		"vite": "^4.4.2"
 	},
 	"type": "module",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/SectionWrapper.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let id;
+</script>
+
+<section {id}>
+	<div>
+		<slot />
+	</div>
+</section>

src/routes/revanced-interactive-tutorial/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+	// your script goes here
+</script>
+
+<div class="container bgGrid" />
+
+<style>
+	.bgGrid {
+		background-size: 40px 40px;
+		background-image: linear-gradient(to right, grey 1px, transparent 1px),
+			linear-gradient(to bottom, grey 1px, transparent 1px);
+	}
+
+	.container {
+		flex: 1;
+	}
+</style>

src/routes/style.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
 	box-sizing: border-box;
 	padding: 0;

svelte.config.js

@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+// import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 const dev = process.argv.includes('dev');
 

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		extend: {}
+	},
+	plugins: []
+};