Added tailwind support

.prettierrc

@@ -2,6 +2,13 @@
 	"useTabs": true,
 	"tabWidth": 4,
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

package.json

@@ -15,13 +15,19 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"autoprefixer": "^10.4.16",
+		"flowbite-svelte-icons": "1",
 		"nintendo-switch-eshop": "^7.1.3",
+		"postcss": "^8.4.32",
+		"postcss-load-config": "^5.0.2",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.5.9",
 		"sharp": "^0.33.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"svgo": "^3.2.0",
+		"tailwindcss": "^3.3.6",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3",

postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer,
+	],
+};
+
+module.exports = config;

src/app.pcss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import "../app.pcss";
 	import { goto } from "$app/navigation";
 	import BackgroundProvider from "$components/BackgroundProvider.svelte";
 	import LogoWithTextHorizontal from "$components/LogoWithTextHorizontal.svelte";
@@ -25,14 +26,14 @@
 {/if}
 
 {#if !isBgExcluded}
-	<BackgroundProvider size={80} gap={12} speed={1} />
+	<BackgroundProvider size={80} gap={12} speed={1}></BackgroundProvider>
 	<div class="below">
 		<div class="page-contents">
 			<slot />
 		</div>
 		<div class="bullshit-flex-container">
-			<div class="bullshit-flex-placeholder" />
-			<div class="bg-below-gradient" />
+			<div class="bullshit-flex-placeholder"></div>
+			<div class="bg-below-gradient"></div>
 		</div>
 	</div>
 {:else}

svelte.config.js

@@ -5,7 +5,7 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [vitePreprocess({})],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

tailwind.config.cjs

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config}*/
+const config = {
+	content: [
+	"./src/**/*.{html,js,svelte,ts}",
+	 "./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}",],
+
+	theme: {
+		extend: {},
+	},
+
+	plugins: [],
+};
+
+module.exports = config;