Generate repo from template
- In our previous series Creating vite vue ts template we created
vue-ts
template. We will use it to create our newvue-ts-tailwind
template. - Start by pressing
+
in github's navbar and selectNew repository
. - Select
vue-ts
asRepository template
and checkInclude all branches
. - Set
Repository name
tovue-ts-tailwind
and pressCreate repository
.
Configure github repository
- Make this repo a
Template repository
as we did in - Enable Depandabot alerts
Update project to mention TailwindCSS
-
Update badges and title in
README.md
.
-[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/imomaliev/vue-ts/main.svg)](https://results.pre-commit.ci/latest/github/imomaliev/vue-ts/main) -![ci](https://github.com/imomaliev/vue-ts/actions/workflows/ci.yml/badge.svg) +[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/imomaliev/vue-ts-tailwind/main.svg)](https://results.pre-commit.ci/latest/github/imomaliev/vue-ts-tailwind/main) +![ci](https://github.com/imomaliev/vue-ts-tailwind/actions/workflows/ci.yml/badge.svg) -# Vue 3 + Typescript + Vite + Jest +# Vue 3 + Typescript + Vite + Jest + TailwindCSS -This template should help get you started developing with Vue 3 and Typescript in Vite. +This template should help get you started developing with Vue 3, Typescript and TailwindCSS in Vite.
-
Update project
name
anddeploy
script inpackage.json
{ - "name": "vite-vue-typescript-starter", + "name": "vite-vue-typescript-tailwind-starter", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", - "deploy": "vue-tsc --noEmit && vite build --base '/vue-ts/'", + "deploy": "vue-tsc --noEmit && vite build --base '/vue-ts-tailwind/'",
-
Add TailwindCSS to components
Insrc/App.vue
- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> + <HelloWorld msg="Hello Vue 3 + TypeScript + Vite + Tailwind" />
and in
src/components/HelloWorld.vue
> + | + <a href="https://tailwindcss.com/docs/installation" target="_blank" + >TailwindCSS Docs</a + > </p>
-
Update
package-lock.json
$ npm install
git add -u
git commit -m 'mention tailwind'
Links
- https://tailwindcss.com/docs
- https://dev.to/imomaliev/github-project-template-1mc3
- https://dev.to/imomaliev/creating-vite-vue-ts-template-install-instructions-and-repo-configuration-779-temp-slug-4634241
Top comments (0)