DEV Community

Cover image for Starter using Vite + React + TypeScript + Tailwind CSS.

Starter using Vite + React + TypeScript + Tailwind CSS.

meijin on March 21, 2021

I made this template repository: https://github.com/TeXmeijin/vite-react-ts-tailwind-starter. It is starter using Vite + React + TypeScript + Tail...
Collapse
 
heyprotagonist profile image
Anguram Shanmugam

will vite have capabilities to replace CRA? Because The compat version doesn't have the compatibility for @tailwindcss/jit.

If there's one please let me know. Though it's usefull post

Collapse
 
stephyswe profile image
Stephanie

I agree. a better question is is there a CRA + tailwind (latest) setup?
hopefully also with template typescript

Collapse
 
heyprotagonist profile image
Anguram Shanmugam • Edited

I Don't use CRA. yeah it offer features out of the box. But come on mate. We're not consumers right?

So, I'm using the Starter from this playlist:
youtube.com/playlist?list=PLC3y8-r...

the channel is awesome source for react & web-dev though.

Also I'm thinking of getting back to sass. Because these tailwindcss, chakra-ui, Material-ui are CSS frameworks.

I love React Coz it's a library. It's more flexible and able to modify as you wish.

The point is that I don't need declarative approach all time. It'll make me lazy.

Thread Thread
 
stephyswe profile image
Stephanie

I actually disagree. I think tailwind is a perfect tool for LEARNING how to code really professional websites. Once you have that grip - like doing things like this youtube.com/watch?v=6xgMkGMIudE you can ofcourse keep that knowledge and learn how to code the same ways without tailwind... but for learning purposes and at start i think its an awesome ui lib.

Thread Thread
 
heyprotagonist profile image
Anguram Shanmugam

That's were you're not right. I'm not telling you're wrong. Just not right.

for example: take the ring offset in tailwind. It only works in button. I don't how about now!
But while I'm using I wrote some custom CSS to get the feature in HyperLink buttons and included in variants. without CSS foundation we need to wait till feature is included officially.

I loved tailwind for utility first design. But I think it's just not for me 🤷‍♂️

Collapse
 
meijin profile image
meijin

@retr0c0de
Thanks for your comment.

In this repository, I use compat version of tailwindcss.
But I still haven't tried other version.

I'll try set up @tailwindcss/jit some time soon and renew this post!

Collapse
 
aashishsinghal profile image
Aashish Singhal

I made a new project based on your repo. It was working finw, but after i pushed the repo onto github, the dev server is stuck at loading page and nothing is rendered, the terminal has no errors, i cannot figure out what the hell went wrong pllease help me.

Link to repo and branch - github.com/WebVikasak-S/dev-resour...

the "client" folder has the latest code.

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
carlitorweb profile image
Carlos Rodriguez • Edited

I just change a small training react project, to Vite and JIT, but is not taking the variants. Also, the Tailwind IntelliSense do not autocomplete when I try to write a variant like disable:..
I do not think I have some wrong config, since is pretty simple to do it...

Collapse
 
carlitorweb profile image
Carlos Rodriguez

By the way, I talking about JIT. React and Tailwind work perfect with Vite, and I pretty sure from now on, I will create any react project using this config. Even when CRA save you not worry of this boring settings under hood, I think worth have full control of your project, and gain speed in development with Vite.

Collapse
 
niubo profile image
Rolando Niubo

Thank you for creating this and safe us all time, I'm currently using it for a Blog I'm building, working like a charm.
Thank yoU!

Collapse
 
zynth17 profile image
Christopher Reeve

thankyou for this great article!
have you try using this setup with styled components and tailwind?

Collapse
 
meijin profile image
meijin

@retr0c0de
@carlitorweb

I released new version!
It uses tailwind JIT mode.

See this PR.
github.com/TeXmeijin/vite-react-ts...

Collapse
 
anandkashyap profile image
Anand Kashyap

great work!! I have a quick question. How to react testing library to this?

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

jest