The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

Metronic dashboard with Vue Tailwind


I want to make a dashboard like Demo8 Metronik and I work with vue and tailwind, but bootstrap is used in this demo package, but I don't want bootstrap and I want the whole project to be with tailwind. How should I do? In the documents, it was written to download the tailwind and html package, but I don't know its integration and that bootstrap classes are not removed from the project. What should I do? sad


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


If you want to build a Vue dashboard based on Metronic Demo8 using Tailwind CSS, I recommend starting with the Tailwind-specific HTML package rather than trying to remove Bootstrap classes from the existing demo. Then, integrate the required layouts, components, assets, and JavaScript functionality into your Vue project, making sure the Tailwind configuration and build process are set up correctly. You can migrate components gradually and replace Bootstrap-dependent styles with Tailwind utilities instead of rewriting everything at once. This modular approach is also useful when building tool-based websites, such as gravelyardcalculator.com, where a clean interface and maintainable components help deliver a better user experience.


 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment

Hi,

For Tailwind, only Metronic 9 Demo 1 is available at the moment.

Since Metronic 9 Tailwind comes with a new codebase we do not mix it with Metronic 8 Bootstrap features. We are working on new demos for Metronic 9 currently and in the upcoming updates we will release more demos for Metronic 9 Tailwind as well.

Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.