├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicons │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ └── site.webmanifest └── index.html ├── src ├── .prettierrc.js ├── App.vue ├── assets │ └── css │ │ ├── base.css │ │ ├── prism.css │ │ └── tailwind.css ├── components │ ├── AddColor.vue │ ├── AddShade.vue │ ├── ColorConfig.vue │ ├── ColorGroup.vue │ ├── ColorPicker.vue │ ├── ColorShade.vue │ ├── Dropdown.vue │ ├── LoadConfig.vue │ ├── Logo.vue │ └── icons │ │ ├── IconAdd.vue │ │ ├── IconBase.vue │ │ ├── IconChevronDown.vue │ │ ├── IconDelete.vue │ │ └── IconDrag.vue ├── data │ ├── defaultColors.js │ └── defaultConfig.js └── main.js └── tailwind.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 10 | }, 11 | parserOptions: { 12 | parser: "babel-eslint" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Andreas Meistad 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwind-colors 2 | A tool to edit colors for Tailwind CSS made with Vue - https://tailwind-colors.meidev.co 3 | 4 | ## Project setup 5 | ``` 6 | npm install 7 | ``` 8 | 9 | ### Compiles and hot-reloads for development 10 | ``` 11 | npm run serve 12 | ``` 13 | 14 | ### Compiles and minifies for production 15 | ``` 16 | npm run build 17 | ``` 18 | 19 | ### Run your tests 20 | ``` 21 | npm run test 22 | ``` 23 | 24 | ### Lints and fixes files 25 | ``` 26 | npm run lint 27 | ``` 28 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@vue/app', { useBuiltIns: 'entry' }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-colors", 3 | "version": "0.2.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.1.4", 12 | "json-url": "^2.6.0", 13 | "popper.js": "^1.15.0", 14 | "prismjs": "^1.23.0", 15 | "vue": "^2.6.10", 16 | "vue-analytics": "^5.17.0", 17 | "vue-color": "^2.7.0", 18 | "vue-prism-component": "^1.1.1", 19 | "vue-social-sharing": "^2.4.7", 20 | "vuedraggable": "^2.23.0" 21 | }, 22 | "devDependencies": { 23 | "@fullhuman/postcss-purgecss": "^1.2.0", 24 | "@ky-is/vue-cli-plugin-tailwind": "^2.0.0", 25 | "@vue/cli-plugin-babel": "^3.9.2", 26 | "@vue/cli-plugin-eslint": "^3.9.2", 27 | "@vue/cli-service": "^3.9.2", 28 | "@vue/eslint-config-prettier": "^6.0.0", 29 | "babel-eslint": "^10.0.2", 30 | "eslint": "^6.0.1", 31 | "eslint-plugin-prettier": "^3.1.3", 32 | "eslint-plugin-vue": "^5.2.3", 33 | "postcss-preset-env": "^6.7.0", 34 | "tailwindcss": "^1.0.5", 35 | "vue-template-compiler": "^2.6.10" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const IN_PRODUCTION = process.env.NODE_ENV === 'production' 2 | 3 | module.exports = { 4 | plugins: [ 5 | require('postcss-preset-env')({ stage: 0 }), 6 | require('tailwindcss')(), 7 | IN_PRODUCTION && require('@fullhuman/postcss-purgecss')({ 8 | content: [ `./public/**/*.html`, `./src/**/*.vue` ], 9 | defaultExtractor (content) { 10 | const contentWithoutStyleBlocks = content.replace(//gi, '') 11 | return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [] 12 | }, 13 | whitelist: [], 14 | whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/ ] 15 | }), 16 | require('autoprefixer')() 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /public/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ameistad/tailwind-colors/1b46002f361e47d06065772e2e161d50686ccbbb/public/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/favicons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ameistad/tailwind-colors/1b46002f361e47d06065772e2e161d50686ccbbb/public/favicons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ameistad/tailwind-colors/1b46002f361e47d06065772e2e161d50686ccbbb/public/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ameistad/tailwind-colors/1b46002f361e47d06065772e2e161d50686ccbbb/public/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ameistad/tailwind-colors/1b46002f361e47d06065772e2e161d50686ccbbb/public/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ameistad/tailwind-colors/1b46002f361e47d06065772e2e161d50686ccbbb/public/favicons/favicon.ico -------------------------------------------------------------------------------- /public/favicons/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 13 | 19 | 25 | 26 | Tailwind Colors 27 | 28 | 29 | 35 |
36 | 37 | 38 | 43 | 44 | -------------------------------------------------------------------------------- /src/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | printWidth: 120, 4 | semi: false 5 | } 6 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 142 | -------------------------------------------------------------------------------- /src/assets/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | @apply text-gray-1000; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/css/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Based on atom-dark theme for `prism.js` 3 | */ 4 | 5 | /* purgecss start ignore */ 6 | code[class*="language-"], 7 | pre[class*="language-"] { 8 | /* color: #c5c8c6; */ 9 | @apply text-gray-200 leading-normal; 10 | font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; 11 | direction: ltr; 12 | text-align: left; 13 | white-space: pre; 14 | word-spacing: normal; 15 | word-break: normal; 16 | tab-size: 4; 17 | hyphens: none; 18 | } 19 | 20 | /* Code blocks */ 21 | pre[class*="language-"] { 22 | padding: 1em; 23 | margin: 0; 24 | overflow: auto; 25 | border-radius: 0.3em; 26 | } 27 | 28 | :not(pre) > code[class*="language-"], 29 | pre[class*="language-"] { 30 | /* background: #1d1f21; */ 31 | /* background-color: #2d3748; */ 32 | @apply bg-gray-800; 33 | } 34 | 35 | /* Inline code */ 36 | :not(pre) > code[class*="language-"] { 37 | @apply p-4 rounded; 38 | } 39 | 40 | .token.comment, 41 | .token.prolog, 42 | .token.doctype, 43 | .token.cdata { 44 | @apply text-gray-600; 45 | } 46 | 47 | .token.punctuation { 48 | @apply text-gray-100; 49 | } 50 | 51 | .namespace { 52 | opacity: .7; 53 | } 54 | 55 | .token.property, 56 | .token.keyword, 57 | .token.tag { 58 | color: #96CBFE; 59 | } 60 | 61 | .token.class-name { 62 | color: #FFFFB6; 63 | text-decoration: underline; 64 | } 65 | 66 | .token.boolean, 67 | .token.constant { 68 | color: #99CC99; 69 | } 70 | 71 | .token.symbol, 72 | .token.deleted { 73 | @apply text-red-600; 74 | } 75 | 76 | .token.number { 77 | @apply text-orange-200; 78 | } 79 | 80 | .token.selector, 81 | .token.attr-name, 82 | .token.string, 83 | .token.char, 84 | .token.builtin, 85 | .token.inserted { 86 | @apply text-green-400; 87 | } 88 | 89 | .token.variable { 90 | @apply text-gray-300; 91 | } 92 | 93 | .token.operator { 94 | color: #EDEDED; 95 | } 96 | 97 | .token.entity { 98 | color: #FFFFB6; 99 | cursor: help; 100 | } 101 | 102 | .token.url { 103 | color: #96CBFE; 104 | } 105 | 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #87C38A; 109 | } 110 | 111 | .token.atrule, 112 | .token.attr-value { 113 | color: #F9EE98; 114 | } 115 | 116 | .token.function { 117 | color: #DAD085; 118 | } 119 | 120 | .token.regex { 121 | color: #E9C062; 122 | } 123 | 124 | .token.important { 125 | color: #fd971f; 126 | } 127 | 128 | .token.important, 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | /* purgecss end ignore */ 136 | -------------------------------------------------------------------------------- /src/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import '~tailwindcss/base.css'; 2 | 3 | /** 4 | * This injects any component classes registered by plugins. 5 | */ 6 | @import '~tailwindcss/components.css'; 7 | 8 | /** 9 | * Here you would add any of your custom component classes; stuff that you'd 10 | * want loaded *before* the utilities so that the utilities could still 11 | * override them. 12 | * 13 | * Example: 14 | * @import 'components/buttons'; 15 | */ 16 | 17 | /** 18 | * This injects all of Tailwind's utility classes, generated based on your 19 | * config file. 20 | */ 21 | @import '~tailwindcss/utilities.css'; 22 | 23 | /** 24 | * Here you would add any custom utilities you need that don't come out of the 25 | * box with Tailwind. 26 | * 27 | * Example: 28 | * @import 'utilities/background-patterns'; 29 | */ 30 | -------------------------------------------------------------------------------- /src/components/AddColor.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 70 | -------------------------------------------------------------------------------- /src/components/AddShade.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 116 | -------------------------------------------------------------------------------- /src/components/ColorConfig.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 125 | -------------------------------------------------------------------------------- /src/components/ColorGroup.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 105 | -------------------------------------------------------------------------------- /src/components/ColorPicker.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 56 | -------------------------------------------------------------------------------- /src/components/ColorShade.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 64 | -------------------------------------------------------------------------------- /src/components/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 94 | 95 | 113 | -------------------------------------------------------------------------------- /src/components/LoadConfig.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 83 | -------------------------------------------------------------------------------- /src/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /src/components/icons/IconAdd.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/icons/IconBase.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 47 | 48 | 58 | -------------------------------------------------------------------------------- /src/components/icons/IconChevronDown.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/icons/IconDelete.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/icons/IconDrag.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/data/defaultColors.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | name: 'black', 4 | shades: [{ name: '', hexCode: '#000' }] 5 | }, 6 | { 7 | name: 'white', 8 | shades: [{ name: '', hexCode: '#fff' }] 9 | }, 10 | { 11 | name: 'gray', 12 | shades: [ 13 | { name: 100, hexCode: '#f7fafc' }, 14 | { name: 200, hexCode: '#edf2f7' }, 15 | { name: 300, hexCode: '#e2e8f0' }, 16 | { name: 400, hexCode: '#cbd5e0' }, 17 | { name: 500, hexCode: '#a0aec0' }, 18 | { name: 600, hexCode: '#718096' }, 19 | { name: 700, hexCode: '#4a5568' }, 20 | { name: 800, hexCode: '#2d3748' }, 21 | { name: 900, hexCode: '#1a202c' } 22 | ] 23 | }, 24 | { 25 | name: 'red', 26 | shades: [ 27 | { name: 100, hexCode: '#fff5f5' }, 28 | { name: 200, hexCode: '#fed7d7' }, 29 | { name: 300, hexCode: '#feb2b2' }, 30 | { name: 400, hexCode: '#fc8181' }, 31 | { name: 500, hexCode: '#f56565' }, 32 | { name: 600, hexCode: '#e53e3e' }, 33 | { name: 700, hexCode: '#c53030' }, 34 | { name: 800, hexCode: '#9b2c2c' }, 35 | { name: 900, hexCode: '#742a2a' } 36 | ] 37 | }, 38 | { 39 | name: 'orange', 40 | shades: [ 41 | { name: 100, hexCode: '#fffaf0' }, 42 | { name: 200, hexCode: '#feebc8' }, 43 | { name: 300, hexCode: '#fbd38d' }, 44 | { name: 400, hexCode: '#f6ad55' }, 45 | { name: 500, hexCode: '#ed8936' }, 46 | { name: 600, hexCode: '#dd6b20' }, 47 | { name: 700, hexCode: '#c05621' }, 48 | { name: 800, hexCode: '#9c4221' }, 49 | { name: 900, hexCode: '#7b341e' } 50 | ] 51 | }, 52 | { 53 | name: 'yellow', 54 | shades: [ 55 | { name: 100, hexCode: '#fffff0' }, 56 | { name: 200, hexCode: '#fefcbf' }, 57 | { name: 300, hexCode: '#faf089' }, 58 | { name: 400, hexCode: '#f6e05e' }, 59 | { name: 500, hexCode: '#ecc94b' }, 60 | { name: 600, hexCode: '#d69e2e' }, 61 | { name: 700, hexCode: '#b7791f' }, 62 | { name: 800, hexCode: '#975a16' }, 63 | { name: 900, hexCode: '#744210' } 64 | ] 65 | }, 66 | { 67 | name: 'green', 68 | shades: [ 69 | { name: 100, hexCode: '#f0fff4' }, 70 | { name: 200, hexCode: '#c6f6d5' }, 71 | { name: 300, hexCode: '#9ae6b4' }, 72 | { name: 400, hexCode: '#68d391' }, 73 | { name: 500, hexCode: '#48bb78' }, 74 | { name: 600, hexCode: '#38a169' }, 75 | { name: 700, hexCode: '#2f855a' }, 76 | { name: 800, hexCode: '#276749' }, 77 | { name: 900, hexCode: '#22543d' } 78 | ] 79 | }, 80 | { 81 | name: 'teal', 82 | shades: [ 83 | { name: 100, hexCode: '#e6fffa' }, 84 | { name: 200, hexCode: '#b2f5ea' }, 85 | { name: 300, hexCode: '#81e6d9' }, 86 | { name: 400, hexCode: '#4fd1c5' }, 87 | { name: 500, hexCode: '#38b2ac' }, 88 | { name: 600, hexCode: '#319795' }, 89 | { name: 700, hexCode: '#2c7a7b' }, 90 | { name: 800, hexCode: '#285e61' }, 91 | { name: 900, hexCode: '#234e52' } 92 | ] 93 | }, 94 | { 95 | name: 'blue', 96 | shades: [ 97 | { name: 100, hexCode: '#ebf8ff' }, 98 | { name: 200, hexCode: '#bee3f8' }, 99 | { name: 300, hexCode: '#90cdf4' }, 100 | { name: 400, hexCode: '#63b3ed' }, 101 | { name: 500, hexCode: '#4299e1' }, 102 | { name: 600, hexCode: '#3182ce' }, 103 | { name: 700, hexCode: '#2b6cb0' }, 104 | { name: 800, hexCode: '#2c5282' }, 105 | { name: 900, hexCode: '#2a4365' } 106 | ] 107 | }, 108 | { 109 | name: 'indigo', 110 | shades: [ 111 | { name: 100, hexCode: '#ebf4ff' }, 112 | { name: 200, hexCode: '#c3dafe' }, 113 | { name: 300, hexCode: '#a3bffa' }, 114 | { name: 400, hexCode: '#7f9cf5' }, 115 | { name: 500, hexCode: '#667eea' }, 116 | { name: 600, hexCode: '#5a67d8' }, 117 | { name: 700, hexCode: '#4c51bf' }, 118 | { name: 800, hexCode: '#434190' }, 119 | { name: 900, hexCode: '#3c366b' } 120 | ] 121 | }, 122 | { 123 | name: 'purple', 124 | shades: [ 125 | { name: 100, hexCode: '#faf5ff' }, 126 | { name: 200, hexCode: '#e9d8fd' }, 127 | { name: 300, hexCode: '#d6bcfa' }, 128 | { name: 400, hexCode: '#b794f4' }, 129 | { name: 500, hexCode: '#9f7aea' }, 130 | { name: 600, hexCode: '#805ad5' }, 131 | { name: 700, hexCode: '#6b46c1' }, 132 | { name: 800, hexCode: '#553c9a' }, 133 | { name: 900, hexCode: '#44337a' } 134 | ] 135 | }, 136 | { 137 | name: 'pink', 138 | shades: [ 139 | { name: 100, hexCode: '#fff5f7' }, 140 | { name: 200, hexCode: '#fed7e2' }, 141 | { name: 300, hexCode: '#fbb6ce' }, 142 | { name: 400, hexCode: '#f687b3' }, 143 | { name: 500, hexCode: '#ed64a6' }, 144 | { name: 600, hexCode: '#d53f8c' }, 145 | { name: 700, hexCode: '#b83280' }, 146 | { name: 800, hexCode: '#97266d' }, 147 | { name: 900, hexCode: '#702459' } 148 | ] 149 | } 150 | ] 151 | -------------------------------------------------------------------------------- /src/data/defaultConfig.js: -------------------------------------------------------------------------------- 1 | export default { 2 | black: '#000', 3 | white: '#fff', 4 | gray: { 5 | 100: '#f7fafc', 6 | 200: '#edf2f7', 7 | 300: '#e2e8f0', 8 | 400: '#cbd5e0', 9 | 500: '#a0aec0', 10 | 600: '#718096', 11 | 700: '#4a5568', 12 | 800: '#2d3748', 13 | 900: '#1a202c' 14 | }, 15 | red: { 16 | 100: '#fff5f5', 17 | 200: '#fed7d7', 18 | 300: '#feb2b2', 19 | 400: '#fc8181', 20 | 500: '#f56565', 21 | 600: '#e53e3e', 22 | 700: '#c53030', 23 | 800: '#9b2c2c', 24 | 900: '#742a2a' 25 | }, 26 | orange: { 27 | 100: '#fffaf0', 28 | 200: '#feebc8', 29 | 300: '#fbd38d', 30 | 400: '#f6ad55', 31 | 500: '#ed8936', 32 | 600: '#dd6b20', 33 | 700: '#c05621', 34 | 800: '#9c4221', 35 | 900: '#7b341e' 36 | }, 37 | yellow: { 38 | 100: '#fffff0', 39 | 200: '#fefcbf', 40 | 300: '#faf089', 41 | 400: '#f6e05e', 42 | 500: '#ecc94b', 43 | 600: '#d69e2e', 44 | 700: '#b7791f', 45 | 800: '#975a16', 46 | 900: '#744210' 47 | }, 48 | green: { 49 | 100: '#f0fff4', 50 | 200: '#c6f6d5', 51 | 300: '#9ae6b4', 52 | 400: '#68d391', 53 | 500: '#48bb78', 54 | 600: '#38a169', 55 | 700: '#2f855a', 56 | 800: '#276749', 57 | 900: '#22543d' 58 | }, 59 | teal: { 60 | 100: '#e6fffa', 61 | 200: '#b2f5ea', 62 | 300: '#81e6d9', 63 | 400: '#4fd1c5', 64 | 500: '#38b2ac', 65 | 600: '#319795', 66 | 700: '#2c7a7b', 67 | 800: '#285e61', 68 | 900: '#234e52' 69 | }, 70 | blue: { 71 | 100: '#ebf8ff', 72 | 200: '#bee3f8', 73 | 300: '#90cdf4', 74 | 400: '#63b3ed', 75 | 500: '#4299e1', 76 | 600: '#3182ce', 77 | 700: '#2b6cb0', 78 | 800: '#2c5282', 79 | 900: '#2a4365' 80 | }, 81 | indigo: { 82 | 100: '#ebf4ff', 83 | 200: '#c3dafe', 84 | 300: '#a3bffa', 85 | 400: '#7f9cf5', 86 | 500: '#667eea', 87 | 600: '#5a67d8', 88 | 700: '#4c51bf', 89 | 800: '#434190', 90 | 900: '#3c366b' 91 | }, 92 | purple: { 93 | 100: '#faf5ff', 94 | 200: '#e9d8fd', 95 | 300: '#d6bcfa', 96 | 400: '#b794f4', 97 | 500: '#9f7aea', 98 | 600: '#805ad5', 99 | 700: '#6b46c1', 100 | 800: '#553c9a', 101 | 900: '#44337a' 102 | }, 103 | pink: { 104 | 100: '#fff5f7', 105 | 200: '#fed7e2', 106 | 300: '#fbb6ce', 107 | 400: '#f687b3', 108 | 500: '#ed64a6', 109 | 600: '#d53f8c', 110 | 700: '#b83280', 111 | 800: '#97266d', 112 | 900: '#702459' 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueAnalytics from 'vue-analytics' 3 | import 'prismjs' 4 | import App from './App.vue' 5 | 6 | // CSS imports 7 | import '@/assets/css/prism.css' 8 | import '@/assets/css/tailwind.css' 9 | import '@/assets/css/base.css' 10 | 11 | Vue.use(VueAnalytics, { 12 | id: 'UA-132852969-3' 13 | }) 14 | 15 | Vue.config.productionTip = false 16 | 17 | new Vue({ 18 | render: h => h(App) 19 | }).$mount('#app') 20 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { colors } = require('tailwindcss/defaultTheme') 2 | 3 | module.exports = { 4 | theme: { 5 | extend: { 6 | colors: { 7 | gray: { 8 | ...colors.gray, 9 | 1000: '#474747' 10 | } 11 | } 12 | }, 13 | container: { 14 | center: true, 15 | padding: '2rem' 16 | } 17 | } 18 | } 19 | --------------------------------------------------------------------------------