DEV Community

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

Posted on

Starter using Vite + React + TypeScript + Tailwind CSS.

I made this template repository: https://github.com/TeXmeijin/vite-react-ts-tailwind-starter.

It is starter using Vite + React + TypeScript + Tailwind. And already set up Prettier and ESLint.

Motivation

Improve building your faster prototyping by using Vite, TypeScript, React, TailwindCSS.

Vite

Vite is a fast frontend build tool. According to the README, it consists of two major parts:

  • A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

React

React is a JavaScript library for building user interfaces.

Due to its awesome renderer system, there are many React Renderor. So React can be not used only Web, for example, used by React Native.

Let's dive into React and Vite can use with React.

TypeScript

TypeScript is a superset of JavaScript. It is just one of NPM library, but it provides an original compiler.

When you use TypeScript with React, you can write JSX with TypeScript, called TSX. Then you can develop views written by Type-Safe template.

Tailwind CSS

Tailwind CSS is modern utility-first CSS framework. It provides many CSS rules, but these are purged when production builds. So developers do not worry about CSS asset size for performance optimization.

In VSCode, I recommend to use intellisense extension.

Frequently, React developers are worried about how to write CSS in TSX(JSX) template. You must choose from CSS Modules, styled-components, linaria, and so on.
Additionally, CSS architecture is difficult about scoping, e.g. BEM, FLOCSS.

When you decide to use Tailwind, you only write utility-first CSS classes, you don't have to worry about them!

Formatter and Linter

Already set up ESLint and Prettier. You can customize the rules.

NOTICE: The template does not use eslint-plugin-prettier and prettier-eslint. So I recommend that running commands individually. e.g. prettier && eslint.

Please read: https://prettier.io/docs/en/integrating-with-linters.html.

Top comments (14)

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