install tailwind css in solidjs + vite + typescript

In this section we will install & setup SolidJS + 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 SolidJS + vite + typescript with tailwind css 3.


Create Tailwind CSS Project with SolidJS

Create tailwind-app with Solid JS using npx:

npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>

Create tailwind-app with Solid JS using yarn:

yarn create tw
# OR
yearn create tw <project-name> --template <id>

Select Solid JS Project.

                  
 _ ._ _  _. _|_ _  _|_     
 (_ | (/_ (_| |_ (/_  |_ \/\/  
                  

Welcome to create-tw!
The easiest way to create a Tailwind project

? Project name tailwind-solidjs
? App type 
 Next.js (create-next-app) 
 Vanilla (create-vite) 
 React (create-vite) 
 Vue (create-vite) 
 Astro (create-astro) 
 Svelte Kit (create-svelte) 
 Preact (create-vite) 
❯ Solid (degit solidjs/templates/js) 

Next you need to select typescript.

? Project name tailwind-solidjs
? App type Solid (degit solidjs/templates/js)
tid solid
? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript 


Select code style.

? Project name tailwind-solidjs
? App type Solid (degit solidjs/templates/js)
tid solid
? What language will your project be written in? ts
templateIdKey solid-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 Plugin.

? 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 server.

cd tailwind-solidjs
npm run dev

Now successfully install SolidJS + Vite + Typescript with Tailwind CSS 3.