install vite + vue 3 + typescript + tailwind css 3

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[email protected]
# OR
npx create[email protected] <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 a vue 3 with typescript + vite + tailwind 3v

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
vue 3 with typescript + vite + tailwind css


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

Tailwind CSS Vue 3 Table Example

Tailwind CSS Vue 3 Modal Examples