tailwind config changes

Author: zlrundefined

package.json

@@ -1,54 +1,54 @@
 {
-  "name": "vue-tailwindcss-dark-mode",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@tailwindcss/forms": "^0.3.3",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "autoprefixer": "^9",
-    "core-js": "^3.6.5",
-    "feather-icons": "^4.28.0",
-    "postcss": "^7",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^14.0.2",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "vue-cli-plugin-tailwind": "~2.0.6"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+	"name": "vuejs-tailwindcss-portfolio",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"@tailwindcss/forms": "^0.3.3",
+		"@tailwindcss/postcss7-compat": "^2.0.2",
+		"autoprefixer": "^9",
+		"core-js": "^3.6.5",
+		"feather-icons": "^4.28.0",
+		"postcss": "^7",
+		"postcss-flexbugs-fixes": "^5.0.2",
+		"postcss-import": "^14.0.2",
+		"postcss-preset-env": "^6.7.0",
+		"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+		"vue": "^3.0.0",
+		"vue-router": "^4.0.0-0"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "~4.5.0",
+		"@vue/cli-plugin-eslint": "~4.5.0",
+		"@vue/cli-plugin-router": "~4.5.0",
+		"@vue/cli-service": "~4.5.0",
+		"@vue/compiler-sfc": "^3.0.0",
+		"babel-eslint": "^10.1.0",
+		"eslint": "^6.7.2",
+		"eslint-plugin-vue": "^7.0.0",
+		"vue-cli-plugin-tailwind": "~2.0.6"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/vue3-essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "babel-eslint"
+		},
+		"rules": {}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead"
+	]
 }

src/assets/css/app.css

@@ -7,28 +7,16 @@
 	/*
     ** Light Mode: Background Colors Variables
     */
-	--bg-background-primary: #f7f8fc;
-	--bg-background-secondary: #ffffff;
-	--bg-background-ternary: #f6f7f8;
-	/*
-    ** Light Mode: Body Text Colors Variables
-    */
-	--text-liText-primary: rgba(107, 114, 128, 1);
-	--text-liText-secondary: rgba(75, 85, 99, 1);
-	--text-liText-ternary: rgba(31, 41, 55, 1);
+	--bg-primary: #f7f8fc;
+	--bg-secondary: #ffffff;
+	--bg-ternary: #f6f7f8;
 }
 
 .theme-dark {
 	/*
     ** Dark Mode: Background Colors Variables
     */
-	--bg-background-primary: #0d2438;
-	--bg-background-secondary: #102d44;
-	--bg-background-ternary: #1e3851;
-	/*
-    ** Dark Mode: Body Text Colors Variables
-    */
-	--text-liText-primary: #ffffff;
-	--text-liText-secondary: #f7f8fc;
-	--text-liText-ternary: #f6f7f8;
+	--bg-primary: #0d2438;
+	--bg-secondary: #102d44;
+	--bg-ternary: #1e3851;
 }

src/assets/css/tailwind.css

@@ -8,28 +8,16 @@
 	/*
     ** Light Mode: Background Colors Variables
     */
-	--bg-background-primary: #f7f8fc;
-	--bg-background-secondary: #ffffff;
-	--bg-background-ternary: #f6f7f8;
-	/*
-    ** Light Mode: Body Text Colors Variables
-    */
-	--text-liText-primary: rgba(107, 114, 128, 1);
-	--text-liText-secondary: rgba(75, 85, 99, 1);
-	--text-liText-ternary: rgba(31, 41, 55, 1);
+	--bg-primary: #f7f8fc;
+	--bg-secondary: #ffffff;
+	--bg-ternary: #f6f7f8;
 }
 
 .theme-dark {
 	/*
     ** Dark Mode: Background Colors Variables
     */
-	--bg-background-primary: #0d2438;
-	--bg-background-secondary: #102d44;
-	--bg-background-ternary: #1e3851;
-	/*
-    ** Dark Mode: Body Text Colors Variables
-    */
-	--text-liText-primary: #ffffff;
-	--text-liText-secondary: #f7f8fc;
-	--text-liText-ternary: #f6f7f8;
+	--bg-primary: #0d2438;
+	--bg-secondary: #102d44;
+	--bg-ternary: #1e3851;
 }

src/components/about/AboutCounter.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-primary-dark shadow-sm">
+	<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
 		<div
 			class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
 		>

src/main.js

@@ -19,5 +19,5 @@ if (
 ) {
 	document.querySelector('body').classList.add('bg-primary-dark');
 } else {
-	document.querySelector('body').classList.add('bg-primary-light');
+	document.querySelector('body').classList.add('bg-secondary-light');
 }

src/views/Contact.vue

@@ -3,7 +3,7 @@
 		<div class="w-full sm:w-1/2">
 			<div class="leading-loose">
 				<form
-					class="max-w-xl m-4 p-6 sm:p-10 bg-white rounded-xl shadow-xl text-left"
+					class="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
 				>
 					<p class="text-gray-600 text-2xl font-semibold mb-8">
 						Contact Form

tailwind.config.js

@@ -1,5 +1,7 @@
 module.exports = {
-	content: ['./src/**/*.vue', './src/**/*.js', './src/**/*.html'],
+	purge: {
+		content: ['./src/**/*.vue', './src/**/*.js', './src/**/*.html'],
+	},
 	darkMode: 'class',
 	theme: {
 		extend: {