add tailwind css

sfxcode · Sep 2, 2021 · 3321f1e · 3321f1e
1 parent 0be7f2d
commit 3321f1e
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@
 - Routing using [vue-router 4](https://next.router.vuejs.org/)
 - TypeScript 4.3
 - PostCSS 8 w/ `postcss-nesting` plugin
+- Tailwind support with tw- prefix because pf primeflex
 - Eslint
 - Prettier
 - Testing with cypress and Jest

diff --git a/index.html b/index.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-      <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" href="/favicon.ico"/>
+    <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Vite Typescript + PrimeVue Starter</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-primevue-starter",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
@@ -12,18 +12,20 @@
     "test:ci": "yarn dev & wait-on tcp:3000 -v & cypress run --headless"
   },
   "dependencies": {
+    "@vueuse/core": "^6.0.0",
     "@vueuse/head": "~0.6",
     "chart.js": "^3.5.0",
     "pinia": "~2.0.0-rc.4",
+    "postcss": "^8.3.6",
     "primeflex": "^3.0.1",
     "primeicons": "^4.1.0",
-    "primevue": "^3.6.2",
+    "primevue": "^3.7.0",
     "sass": "^1.37.5",
-    "vue": "^3.2.2",
-    "vue-composable": "^1.0.0-beta.23",
+    "tailwindcss": "^2.2.8",
+    "vue": "^3.2.6",
     "vue-i18n": "^9.2.0-alpha.9",
     "vue-logger-plugin": "^2.1.3",
-    "vue-router": "^4.0.10"
+    "vue-router": "^4.0.11"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -34,7 +36,7 @@
     "@fullcalendar/timegrid": "^5.9.0",
     "@fullcalendar/vue3": "^5.9.0",
     "@intlify/vite-plugin-vue-i18n": "^2.4.0",
-    "@jest/create-cache-key-function": "^26.0.0",
+    "@jest/create-cache-key-function": "^27.1.0",
     "@types/jest": "^26.0.0",
     "@typescript-eslint/eslint-plugin": "~4",
     "@typescript-eslint/parser": "~4",
@@ -48,19 +50,19 @@
     "@vuedx/typecheck": "~0.7",
     "@vuedx/typescript-plugin-vue": "~0.7",
     "autoprefixer": "~10.3",
-    "babel-jest": "^26.0.0",
+    "babel-jest": "^27.1.0",
     "cypress": "~8.2",
     "eslint": "~7",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "~7",
-    "jest": "^26.0.0",
+    "jest": "^27.1.0",
     "postcss": "~8.3",
     "postcss-nesting": "~8.0",
     "rxjs": "^7.3.0",
-    "ts-jest": "^26.0.0",
-    "typescript": "~4.3",
+    "ts-jest": "^27.0.5",
+    "typescript": "~4.4.2",
     "vite": "^2.5.0-beta.1",
     "vite-plugin-eslint": "^1.3.0",
     "vue-jest": "next",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    tailwindcss: {},
     autoprefixer: {},
     'postcss-nesting': {},
   },

diff --git a/src/App.scss b/src/App.scss
@@ -1,6 +1,15 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
 $gutter: 1rem;
 
 @import "node_modules/primeflex/primeflex.scss";
 
 @import "sass/layout";
 @import "sass/theme";
+
+a {
+  color: #3788d8;
+  cursor: pointer;
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <TabMenu :model="tabs"/>
+
   </div>
   <div class="p-2">
     <router-view/>

diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -3,11 +3,10 @@
   <div class="surface-0 text-center">
     <div class="mb-3 font-bold text-4xl">
       <span class="text-green-600">PrimeVue </span>
-      <img src="assets/logo.png" alt="Logo" width="25" height="25">
       <span class="text-blue-400"> & TypeScript</span>
       <span class="text-blue-600"> & Vite</span>
     </div>
-    <h2>Starter for Vue.js Development.</h2>
+    <h2 class="text-2xl pb-2">Starter for Vue.js Development.</h2>
     <div class="grid">
       <AdvertiseBox header="VUE 3.2.x" icon="pi-check-circle">
 
@@ -27,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import AdvertiseBox from '@/widgets/AdvertiseBox.vue';
+import AdvertiseBox from '../widgets/AdvertiseBox.vue';
 
 </script>
 

diff --git a/src/components/Store.vue b/src/components/Store.vue
@@ -1,6 +1,6 @@
 <template>
   <h5 class="font-bold text-2xl mb-4 text-blue-600">Pinia Store</h5>
-  <p>Example of Pinia Store !</p>
+  <p class="tw-text-xl tw-pb-4">Example of Pinia Store !</p>
   <div>Mainstore: {{ mainStore }}</div>
   <div>myRef Value: {{ myRef }}</div>
   <div>Pinia State counter: {{ counter }}</div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,24 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+    mode: 'jit',
+    prefix: 'tw-',
+    purge: {
+        enabled: process.env.NODE_ENV === 'production',
+        // classes that are generated dynamically, e.g. `rounded-${size}` and must
+        // be kept
+        safeList: [],
+        content: [
+            './index.html',
+            './src/**/*.{vue,js,ts}',
+            // etc.
+        ],
+    },
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+            },
+        },
+    },
+}