Vue Tailwind Template

preview
  • vue

  • javascript

  • tailwind


  • Vue Tailwind Template is a simple Vue starter template which includes some of my personal preferences. The project was created with the wonderful vite, which, much like the vue cli, takes the drudgery out of scaffolding vue projects. This template simply includes tailwind and Oh Vue Icons! from the get go.

    This is for my personal use, and I may add packages as and when I decide I need them. Still, as things stand it is very light and I can imagine others may find the 2 minute saving useful, so feel free if that appeals to you.

    I have left the starter in a state such that it demonstrates some of the key usage concepts of vue + vite, tailwind and oh vue icons. For example:

    • thanks to vite, you can use script setup tags to simplify usage of the composition api in Vue v3
    • some tailwind utility classes are in use in the HelloWorld component
    • index.css includes a @layer components directive to show global manipulation
    • tailwind.config.js includes theme extensions, and purging of unused code
    • main.js shows how to include and register icons individually from Oh Vue Icons, and an icon is used in HelloWorld

    The code is hosted at github and you can visit this using the view on github button at the top of this page.