I made this template repository: https://github.com/TeXmeijin/vite-react-ts-tailwind-starter.
It is starter using Vite + React + TypeScript + Tail...
For further actions, you may consider blocking this person and/or reporting abuse
@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!
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
I agree. a better question is is there a CRA + tailwind (latest) setup?
hopefully also with template typescript
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.
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.
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 🤷♂️
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...
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.
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...
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!
@retr0c0de
@carlitorweb
I released new version!
It uses tailwind JIT mode.
See this PR.
github.com/TeXmeijin/vite-react-ts...
thankyou for this great article!
have you try using this setup with styled components and tailwind?
great work!! I have a quick question. How to react testing library to this?
jest