In this section we will install & setup Vue 3 + Vite + Typescript with Tailwind CSS 3. For this section we will use create-tw it will help to CLI to scaffold tailwindcss-ready projects. create-tw help to create simple ready template for Vue 3 + vite + typescript with tailwind css 3.
Create Tailwind CSS Project with Vue 3
Create tailwind-app with vue 3 using npx:
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
Create tailwind-app with vue 3 using yarn:
yarn create tw
# OR
yearn create tw <project-name> --template <id>
Select vue 3 vite project.
Select typescript for vue 3 project.
? Project name vue3-tailwind
? App type Vue (create-vite)
tid vue
? What language will your project be written in? (Use arrow keys)
❯ TypeScript
JavaScript
Select code style.
? Project name vue3-tailwind
? App type Vue (create-vite)
tid vue
? What language will your project be written in? ts
templateIdKey vue-ts
? Which dependencies would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection,
and <enter> to proceed)
❯◯ prettier
◯ clsx
Select tailwind plugins in vue 3.
? Project name vue3-tailwind
? App type Vue (create-vite)
tid vue
? What language will your project be written in? ts
templateIdKey vue-ts
? Which dependencies would you like to include?
? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
◯ @tailwindcss/typography
❯◯ @tailwindcss/forms
◯ @tailwindcss/aspect-ratio
Move to project and run vite.
cd vue3-tailwind
npm run dev
Read Also
Vue 3 Dark Mode with Tailwind CSS Example
Install Vite + Vue 3 + Typescript + Tailwind CSS 3
How to Install Tailwind CSS in Vue 3
How to install Bootstrap 5 in Vue 3
Vue 3 Responsive Navbar Menu With Tailwind CSS Example
Vue 3 Dropdown With Tailwind CSS Examples
