feat: tailwind support

Author: wadehrarshpreet

README.md

@@ -5,6 +5,7 @@ This is a project template for [Svelte](https://svelte.dev) apps.
 ### Featuring
 - [Svelte](https://svelte.dev/)
 - [Typescript](https://www.typescriptlang.org/)
+- [Tailwind](https://tailwindcss.com/)
 - [Jest](https://jestjs.io/)
 - [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/intro/)
 - [Eslint](https://eslint.org/)

package.json

@@ -3,9 +3,11 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "yarn pre-build && rollup -c",
+    "build": "yarn pre-build && npm run build:tailwind && rollup -c",
     "pre-build": "yarn coverage && yarn check",
-    "dev": "rollup -c -w",
+    "watch:tailwind": "postcss public/global-tailwind.css -o public/global.css -w",
+    "build:tailwind": "cross-env NODE_ENV=production postcss public/global-tailwind.css -o public/global.css",
+    "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\"",
     "start": "sirv public --no-clear",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "jest --passWithNoTests",
@@ -26,7 +28,10 @@
     "@types/jest": "^27.5.1",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
+    "autoprefixer": "^10.4.7",
     "babel-jest": "^28.1.0",
+    "concurrently": "^7.2.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
@@ -35,6 +40,8 @@
     "jest-circus": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "jsdom": "^19.0.0",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
     "rollup": "^2.3.4",
@@ -46,6 +53,7 @@
     "svelte-check": "^2.7.1",
     "svelte-jester": "^2.3.2",
     "svelte-preprocess": "^4.0.0",
+    "tailwindcss": "^3.0.24",
     "tslib": "^2.0.0",
     "typescript": "^4.0.0"
   },

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+};

public/global-tailwind.css

@@ -0,0 +1,72 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  color: #333;
+  margin: 0;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    'Helvetica Neue', sans-serif;
+}
+
+a {
+  color: rgb(0, 100, 200);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:visited {
+  color: rgb(0, 80, 160);
+}
+
+label {
+  display: block;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-padding: 0.4em 0;
+  padding: 0.4em;
+  margin: 0 0 0.5em 0;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+}
+
+input:disabled {
+  color: #ccc;
+}
+
+button {
+  color: #333;
+  background-color: #f4f4f4;
+  outline: none;
+}
+
+button:disabled {
+  color: #999;
+}
+
+button:not(:disabled):active {
+  background-color: #ddd;
+}
+
+button:focus {
+  border-color: #666;
+}