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[email protected]
# OR
npx create[email protected] <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.
