npx svelte-add tailwindcss

package.json

@@ -23,9 +23,14 @@
     "prettier-plugin-svelte": "^2.4.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.9.4",
+    "svelte-preprocess": "^4.9.8",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "postcss": "^8.3.9",
+    "postcss-load-config": "^3.1.0",
+    "autoprefixer": "^10.3.7",
+    "cssnano": "^5.0.8",
+    "tailwindcss": "^3.0.0"
   },
   "type": "module"
 }

postcss.config.cjs

@@ -0,0 +1,21 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer(),
+    !dev &&
+      cssnano({
+        preset: "default",
+      }),
+  ],
+};
+
+module.exports = config;

src/app.css

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

src/routes/__layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import "../app.css";
+</script>
+
+<slot />

svelte.config.js

@@ -5,7 +5,11 @@ import preprocess from "svelte-preprocess";
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: preprocess(),
+  preprocess: [
+    preprocess({
+      postcss: true,
+    }),
+  ],
 
   kit: {
     adapter: adapter(),

tailwind.config.cjs

@@ -0,0 +1,11 @@
+const config = {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+
+  theme: {
+    extend: {},
+  },
+
+  plugins: [],
+};
+
+module.exports = config;