my-react-template

A simple React and TypeScript template for VS Code.

$ git clone -b template [email protected]:ahuglajbclajep/my-react-template.git REPOSITORY && cd $_
$ npm i; npm run dev

$ git branch -m main
$ git remote set-url origin [email protected]:OWNER/REPOSITORY.git

Additional Configuration

Using with clsx & prettier-plugin-tailwindcss

See also:

• https://github.com/lukeed/clsx?tab=readme-ov-file#tailwind-support
• https://github.com/tailwindlabs/prettier-plugin-tailwindcss
• tailwindlabs/tailwindcss#7554

$ npm i clsx
$ npm i -D prettier-plugin-tailwindcss

.vscode/settings.json

{
  "tailwindCSS.experimental.classRegex": [
-   // e.g. const fooStyle = "bar";
-   "Style\\s*=\\s*['\"`]([^'\"`]*)['\"`];"
+   // e.g. const fooStyle = clsx("bar baz", cond ? "qux" : "quux");
+   ["Style\\s*=\\s*clsx\\(([^\\)]*)\\);", "['\"`]([^'\"`]*)['\"`]"]
  ]
}

.prettierrc.mjs

/**
 * @type {import("prettier").Config}
 */
const config = {
  plugins: ["prettier-plugin-tailwindcss"],
  tailwindFunctions: ["clsx"],
};

export default config;

package.json

{
- "prettier": {}
}

Using with gh-pages

See also:

$ npm i -D gh-pages

package.json

{
  "scripts": {
    "preview": "vite preview",
+   "deploy": "npm run build && gh-pages -d dist",
    "lint:type": "tsc",
  }
}