⚡️ feat: support for Tailwind CSS IntelliSense

Author: babichjacob

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
     "recommendations": [
+        "bradlc.vscode-tailwindcss",
         "svelte.svelte-vscode"
     ]
 }

README.md

@@ -7,9 +7,10 @@ This is an extension to the [official Sapper Rollup template](https://github.com
 If you're looking for something with much, much more bundled in, check out [my opinionated project base](https://github.com/babichjacob/sapper-firebase-typescript-graphql-tailwindcss-actions-template).
 
 - [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)
 - [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/)
@@ -18,7 +19,7 @@ If you're looking for something with much, much more bundled in, check out [my o
   - [`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
 
 ## 📋 Copy
@@ -71,10 +72,10 @@ npm run export
 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),

package.json

@@ -16,7 +16,7 @@
     "url": "https://github.com/babichjacob/sapper-postcss-template.git"
   },
   "license": "MIT",
-  "version": "2020.08.20",
+  "version": "2020.08.27",
   "scripts": {
     "eslint": "eslint",
     "eslint:fix": "eslint --fix ./*.js ./src/*.js ./src/routes/**/*.svelte ./src/components/**/*.svelte",

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

@@ -5,16 +5,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,12 +1,13 @@
 const sveltePreprocess = require("svelte-preprocess");
+const postcss = require("./postcss.config");
 
 const defaults = {
 	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,
+	},
 };