Vite + React + TypeScript + StyleX + Tailwind Starter Project

This template is a minimal setup for a Vite React project made via "npm create vite@latest" and choosing the react-typescript template. In addition to that, I installed and configured StyleX and Tailwind so they can be used with this Typescript React project. I've also added Cypress for both component testing and end-to-end testing.

I've removed all default HTML and CSS code that's generated by "npm create vite@latest" so you have a clean slate from which you can write your own HTML and CSS styles completely from scratch.

Styles Built With

• TailwindCSS A utility-first CSS framework with lots of classes to style directly in your markup
• StyleX The CSS-in-JS framework used by Facebook

Other Plugins

• Prettier Code formatter needed for TailwindCSS's automatic CSS class sorting
• prettier-plugin-tailwindcss A Prettier plugin for TailwindCSS that automatically sorts classes based on Tailwind's recommended class order.
• Cypress A next generation front end testing tool built for the modern web.
• axe-core Accessibility engine for automated Web UI testing
• cypress-axe Test accessibility with axe-core in Cypress
• cypress-real-events More reliable way to test native browser events in Cypress

Shadcn/ui is also included

• shadcn/ui A set of well-designed, accessible components and a code distribution platform
• Add components from shadcn/ui via:npx shadcn@latest add [component]

Installation

1. Clone the repository:

   git clone https://github.com/BDuong0/vite-react-ts-stylex-tailwind-starter.git

   cd vite-react-ts-stylex-tailwind-starter

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev