Update to tailwindcss v3 (#3)

* Update to vite * Update gradient Colors * Update readme * Delete text file
tailwindcomponents · Oct 7, 2022 · 05773be · 05773be
1 parent df335b5
commit 05773be
Show file tree

Hide file tree

Showing 22 changed files with 1,664 additions and 9,965 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,21 +1,22 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="public/gradinet-generator.png" alt="gradinet-generator">
+    <img src="public/gradinet-generator.png" alt="gradinet-generator"></p>
 
 ## Tailwind Components Gradient Generator
 This repo content a Gradient Generator page from [tailwindcompnents.com](https://tailwindcomponents.com/gradient-generator/), Build with Vuejs.
@@ -23,18 +23,18 @@ yarn install
 
 ### Compiles and hot-reloads for development
 ```
-yarn serve
+yarn dev
 ```
 
 ### Compiles and minifies for production
 ```
 yarn build
 ```
 
-### Lints and fixes files
-```
-yarn lint
-```
+### Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+### Recommended IDE Setup
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
diff --git a/babel.config.js b/babel.config.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -1,28 +1,26 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-
-    <meta property="og:image" content="<%= BASE_URL %>gradinet-generator.png" />
+    
+    <meta property="og:image" content="/gradinet-generator.png" />
     <meta property="og:title" content="Tailwind Gradient Generator" />
     <meta property="og:description" content="Create perfect gradients for your tailwind CSS sites easily with zero lines of code." />
-
+    
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@TwComponents" />
     <meta name="twitter:title" content="Tailwind Gradient Generator" />
-    <meta name="twitter:description" content="Create perfect gradients for your tailwind CSS sites easily with zero lines of code." />
-    <meta name="twitter:image" content="<%= BASE_URL %>gradinet-generator.png" />
-
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta name="twitter:description"
+      content="Create perfect gradients for your tailwind CSS sites easily with zero lines of code." />
+    <meta name="twitter:image" content="/gradinet-generator.png" />
+
+    <link rel="icon" href="/sm-logo.svg">
     <title>Tailwind Gradient Generator</title>
   </head>
   <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,47 +1,23 @@
 {
   "name": "gradient-generator",
-  "version": "0.1.0",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.3.3",
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0",
+    "@tailwindcss/forms": "^0.5.3",
+    "vue": "^3.2.37",
     "vue3-clipboard": "^1.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "autoprefixer": "^9",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "postcss": "^7",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
-  },
-  "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"
-  ]
+    "@vitejs/plugin-vue": "^3.1.0",
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
+    "vite": "^3.1.0"
+  }
 }
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/sm-logo.svg b/public/sm-logo.svg
diff --git a/src/components/Colors.vue b/src/components/Colors.vue
@@ -20,7 +20,7 @@ export default {
 
     data() {
         return {
-            colors: ['blue-gray', 'gray', 'true-gray', 'warm-gray', 'lime', 'green', 'teal', 'cyan', 'light-blue', 'blue', 'indigo',  'purple', 'fuchsia', 'red', 'orange', 'yellow', 'pink', 'rose'],
+            colors: ['slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'],
             values: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
         }
     },

diff --git a/src/components/DefaultGradients.vue b/src/components/DefaultGradients.vue
@@ -17,7 +17,7 @@ export default {
 
     data() {
         return {
-            colors: ['blue-gray', 'gray', 'true-gray', 'warm-gray', 'lime', 'green', 'teal', 'cyan', 'light-blue', 'blue', 'indigo',  'purple', 'fuchsia', 'red', 'orange', 'yellow', 'pink', 'rose'],
+            colors: ['slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'],
         }
     },
 

diff --git a/src/components/Generator.vue b/src/components/Generator.vue
@@ -77,9 +77,9 @@ export default {
             isVia: false,
             step: 'from',
             direction: 'bg-gradient-to-r',
-            from: 'from-teal-400',
-            via: 'via-teal-600',
-            to: 'to-teal-800',
+            from: 'from-teal-300',
+            via: 'via-teal-400',
+            to: 'to-teal-500',
             isCopied: false,
         }
     },

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <header class="bg-white border-b">
+    <header class="bg-white">
         <nav class="container flex items-center justify-between px-4 py-6 mx-auto">
             <div class="flex items-center">
                 <a href="https://tailwindcomponents.com/">
@@ -9,7 +9,7 @@
                 <h1 class="flex items-center pl-2 ml-2 text-lg text-gray-600 border-l border-gray-400">Gradient <span class="flex items-center py-0.5 px-2 ml-2 text-xs font-bold text-white rounded-md bg-primary">Generator</span></h1>
             </div>
 
-            <a href="https://github.com/tailwindcomponents/gradient-generator" class="text-gray-700 hover:text-primary" aria-label="Github">
+            <a href="https://github.com/tailwindcomponents/gradient-generator" class="text-gray-600 duration-300 transition-colors hover:text-primary" aria-label="Github">
                 <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                     <path

diff --git a/src/assets/app.css → src/main.css b/src/assets/app.css → src/main.css
diff --git a/src/main.js b/src/main.js
@@ -1,9 +1,9 @@
 import { createApp } from 'vue';
 import VueClipboard from 'vue3-clipboard'
 import App from './App.vue';
-import './assets/app.css';
+import "./main.css";
 
 createApp(App).use(VueClipboard, {
     autoSetContainer: true,
     appendToBody: true,
-  }).mount('#app');
+}).mount('#app');