V-Dashboard
Dashboard starter template built with Vite, Vue 3, Tailwind CSS and TypeScript.
Copied from https://github.com/tailwindcomponents/dashboard and converted to Vue.
Demo
https://v-dashboard.vercel.app/
Note if you have access to Tailwind UI, you can follow the following steps to add it:
- Install
@tailwindcss/ui
:
yarn add @tailwindcss/ui
- Add the plugin in
tailwind.config.js
without changing anything else:
// tailwind.config.js
module.exports = {
// ...
// rest of the config
plugins: [require('@tailwindcss/ui')],
}
Project setup
yarn
Compiles and hot-reloads for development
yarn dev
Compiles and minifies for production
yarn build
License & copyright
Licensed under the MIT License.
Error occurs "[vite] error applying css transforms:" message.
Windows 10 yarn 1.22.4 node v12.16.1
$> yarn dev PS D:\project\v-dashboard> yarn dev yarn run v1.22.4 $ vite
Dev server running at:
[vite] error applying css transforms: TypeError: value.charCodeAt is not a function at D:\project\v-dashboard\node_modules\tailwindcss\components.css:1:1 at module.exports (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\parse.js:17:20) at new ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:7:18) at ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:10:10) at transformValue (D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:20:55) at D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:72:24 at D:\project\v-dashboard\node_modules\postcss-functions\dist\index.js:45:18 at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:74:18 at Rule.each (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:60:16) at Rule.walk (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:71:17) at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:79:24 { postcssNode: Declaration { raws: {}, type: 'decl', prop: 'font-size', value: { lineHeight: '1.5rem' }, parent: Rule { raws: [Object], type: 'rule', nodes: [Array], selector: '.form-input', lastEach: 7, indexes: [Object], parent: [AtRule], source: [Object] }, source: { start: [Object], input: [Input], end: [Object] } } } 0 [ TypeError: value.charCodeAt is not a function at D:\project\v-dashboard\node_modules\tailwindcss\components.css:1:1 at module.exports (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\parse.js:17:20) at new ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:7:18) at ValueParser (D:\project\v-dashboard\node_modules\postcss-functions\node_modules\postcss-value-parser\lib\index.js:10:10) at transformValue (D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:20:55) at D:\project\v-dashboard\node_modules\postcss-functions\dist\lib\transformer.js:72:24 at D:\project\v-dashboard\node_modules\postcss-functions\dist\index.js:45:18 at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:74:18 at Rule.each (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:60:16) at Rule.walk (D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:71:17) at D:\project\v-dashboard\node_modules@vue\compiler-sfc\node_modules\postcss\lib\container.js:79:24 { postcssNode: Declaration { raws: {}, type: 'decl', prop: 'font-size', value: [Object], parent: [Rule], source: [Object] } } ]
Migrate to Tailwind version 2
Hello,
Please find the pull request for the Version 2,
This will cover
Thank you for the initial work 👍 🥇 , this is very helpfull.
Julien
Thank you
Hi, I'm opening this issue only to thank you for this project! I'm always looking for a TailwindCSS Dashboard and I'm in love with this project!
Thank you so much! <3
using require
How can I use require statement in typescript ?
I'm trying to use something like this
const Store = require('some').Some
, but I can't see anything on browser, app doesn't start because error require is not definedUpdate Tailwind to version 2
As the title says, need to update this one with the latest version of Tailwind.
https://tailwindcss.com/docs/upgrading-to-v2
Vite uses PostCSS 7 and Tailwind 2 requires 8+, so we will have to use the PostCSS 7 compatibility build of Tailwind 2.