DEV Community

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

Starter using Vite + React + TypeScript + Tailwind CSS.

texmeijin profile image meijin ・2 min read

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.

Discussion (6)

pic
Editor guide
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
texmeijin profile image
meijin Author

@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
anandkashyap profile image
Anand Kashyap

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

Collapse
retr0c0de 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
texmeijin profile image
meijin Author

@retr0c0de
@carlitorweb

I released new version!
It uses tailwind JIT mode.

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