⚡️ feat: support for Tailwind CSS IntelliSense

Author: babichjacob

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
     "recommendations": [
+        "bradlc.vscode-tailwindcss",
         "dbaeumer.vscode-eslint",
         "jsayol.firebase-explorer",
         "svelte.svelte-vscode"

README.md

@@ -5,7 +5,7 @@ The site that builds from this repository can be found [here](https://fir-sapper
 
 This is an extremely opinionated Sapper project base intended for my own use. That being said, there is quite a bit of work put into it to make it generalized and adaptable to your own setup, given that you want to use *most* of these things. The lower something is on this list, the easier it is to reconfigure or remove:
 - [Sapper for Svelte](https://sapper.svelte.dev/)
-  - [Official VS Code Plugin](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
+  - [Official VS Code Extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
 - [Firebase](https://firebase.google.com/)
   - [Functions](https://firebase.google.com/docs/functions/) for Server Side Rendering (SSR)
   - [Hosting](https://firebase.google.com/docs/hosting) for static assets
@@ -16,6 +16,7 @@ This is an extremely opinionated Sapper project base intended for my own use. Th
   - Inside Svelte components, thanks to [`svelte-preprocess`](https://github.com/kaisermann/svelte-preprocess)
 - [PostCSS](https://postcss.org/)
   - [Tailwind CSS](https://tailwindcss.com/)
+     - [Official VS Code Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
   - [postcss-import](https://github.com/postcss/postcss-import)
   - [PurgeCSS](https://www.purgecss.com/)
   - [CSSNano](https://cssnano.co/)
@@ -26,7 +27,7 @@ This is an extremely opinionated Sapper project base intended for my own use. Th
   - [`manifest.json`](https://developer.mozilla.org/en-US/docs/Web/Manifest)'s most important fields filled out
   - High [Lighthouse](https://developers.google.com/web/tools/lighthouse) audit score
 - [ESLint](https://eslint.org/)
-  - [VS Code Plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+  - [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
   - `eslint:fix` package script
 
 This template comes from combining two of my smaller ones: [one for Tailwind CSS (PostCSS)](https://github.com/babichjacob/sapper-postcss-template), and [another for TypeScript and GraphQL](https://github.com/babichjacob/sapper-typescript-graphql-template). If this is too much for you, check out one of those!
@@ -120,10 +121,10 @@ This project base comes with [source maps](https://blog.teamtreehouse.com/introd
 1. Remove all Tailwind imports in the `src/global.pcss` file
 2. Remove these lines in `postcss.config.js`:
     1. ```js
-       import tailwindcss from "tailwindcss";
+       const tailwindcss = require("tailwindcss");
        ```
     3. ```js
-       import * as tailwindcssConfig from "./tailwind.config";
+       const tailwindcssConfig = require("./tailwind.config");
        ```
     3. ```js
        tailwindcss(tailwindcssConfig),

postcss.config.js

@@ -1,34 +1,36 @@
-import cssnano from "cssnano";
-import postcssImport from "postcss-import";
-import postcssPresetEnv from "postcss-preset-env";
-import postcssPurgecss from "@fullhuman/postcss-purgecss";
-import tailwindcss from "tailwindcss";
-import * as tailwindcssConfig from "./tailwind.config";
+const cssnano = require("cssnano");
+const postcssImport = require("postcss-import");
+const postcssPresetEnv = require("postcss-preset-env");
+const postcssPurgecss = require("@fullhuman/postcss-purgecss");
+const tailwindcss = require("tailwindcss");
+const tailwindcssConfig = require("./tailwind.config");
 
 const mode = process.env.NODE_ENV;
 const dev = mode === "development";
 
-export const plugins = [
-	postcssImport,
+module.exports = {
+	plugins: [
+		postcssImport,
 
-	tailwindcss(tailwindcssConfig),
+		tailwindcss(tailwindcssConfig),
 
-	postcssPresetEnv({
-		features: {
-			// https://github.com/tailwindcss/tailwindcss/issues/1190
-			"focus-within-pseudo-class": false,
-		},
-	}),
+		postcssPresetEnv({
+			features: {
+				// https://github.com/tailwindcss/tailwindcss/issues/1190
+				"focus-within-pseudo-class": false,
+			},
+		}),
 
-	!dev && postcssPurgecss({
-		content: ["./src/**/*.svelte", "./src/**/*.html"],
-		defaultExtractor: (content) => [...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
-	}),
+		!dev && postcssPurgecss({
+			content: ["./src/**/*.svelte", "./src/**/*.html"],
+			defaultExtractor: (content) => [...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
+		}),
 
-	!dev && cssnano({
-		preset: [
-			"default",
-			{ discardComments: { removeAll: true } },
-		],
-	}),
-].filter(Boolean);
+		!dev && cssnano({
+			preset: [
+				"default",
+				{ discardComments: { removeAll: true } },
+			],
+		}),
+	].filter(Boolean),
+};

rollup.config.js

@@ -7,16 +7,9 @@ import svelte from "rollup-plugin-svelte";
 import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
 import config from "sapper/config/rollup";
-import sveltePreprocess from "svelte-preprocess";
 import pkg from "./package.json";
-import * as postcss from "./postcss.config";
 
-const { defaults } = require("./svelte.config.js");
-
-const preprocess = [
-	sveltePreprocess({ defaults, postcss }),
-	// You could have more preprocessors, like MDsveX
-];
+const { preprocess } = require("./svelte.config.js");
 
 const mode = process.env.NODE_ENV;
 const dev = mode === "development";

svelte.config.js

@@ -1,13 +1,14 @@
 const sveltePreprocess = require("svelte-preprocess");
+const postcss = require("./postcss.config");
 
 const defaults = {
 	script: "typescript",
 	style: "postcss",
 };
 
 module.exports = {
-	// Real svelte-preprocess configuration is in `rollup.config.js`
-	// This is only for the language server for VS Code and svelte-check
-	preprocess: sveltePreprocess({ defaults }),
-	defaults,
+	preprocess: [
+		sveltePreprocess({ defaults, postcss }),
+		// You could have more preprocessors, like mdsvex
+	],
 };

tailwind.config.js

@@ -5,18 +5,19 @@
 	View the full documentation at https://tailwindcss.com.
 */
 
-import tailwindui from "@tailwindcss/ui";
+const tailwindui = require("@tailwindcss/ui");
 
-export const purge = false; // Purging is taken care of in postcss.config.js
+module.exports = {
+	purge: false, // Purging is taken care of in postcss.config.js
+	theme: {
+		extend: {},
+	},
+	variants: {},
+	plugins: [
+		tailwindui,
+	],
 
-export const theme = {
-	extend: {},
-};
-export const variants = {};
-export const plugins = [
-	tailwindui, // Can drastically slow down build time, disable if a problem
-];
-
-export const future = {
-	removeDeprecatedGapUtilities: true,
+	future: {
+		removeDeprecatedGapUtilities: true,
+	},
 };