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)
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 🤷♂️
@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!
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...
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.
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!
thankyou for this great article!
have you try using this setup with styled components and tailwind?
@retr0c0de
@carlitorweb
I released new version!
It uses tailwind JIT mode.
See this PR.
github.com/TeXmeijin/vite-react-ts...
great work!! I have a quick question. How to react testing library to this?
jest