https://github.com/hgballesteros/snowpack-react-typescript-tailwind

A pre-configured template for Snowpack with React, TypeScript, and TailwindCSS
https://github.com/hgballesteros/snowpack-react-typescript-tailwind

esbuild react snowpack snowpack-starter tailwind tailwindcss ts typescript

Last synced: 3 months ago
JSON representation

A pre-configured template for Snowpack with React, TypeScript, and TailwindCSS

• Host: GitHub
• URL: https://github.com/hgballesteros/snowpack-react-typescript-tailwind
• Owner: hgballesteros
• License: mit
• Created: 2020-12-24T20:37:38.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-24T21:13:38.000Z (about 4 years ago)
• Last Synced: 2024-09-28T13:42:20.982Z (3 months ago)
• Topics: esbuild, react, snowpack, snowpack-starter, tailwind, tailwindcss, ts, typescript
• Language: TypeScript
• Homepage: https://snowpack-react-typescript-tailwind.vercel.app
• Size: 87.9 KB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Hugo's Snowpack React + Typescript + Tailwind Template

Built off of [@snowpack/app-template-react-typescript](https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-react-typescript).

Demo at [snowpack-react-typescript-tailwind.vercel.app](https://snowpack-react-typescript-tailwind.vercel.app)

## Getting Started

1. `npx create-snowpack-app new-app --template snowpack-react-typescript-tailwind [--use-yarn | --use-pnpm | --no-install]`

2. `cd new-app` to switch to your project directory.

3. `npm start` to run the dev server.

Replace `new-app` with the name of your application.

## NPM Scripts

- `start` will open a browser tab at [localhost:8080](http://localhost:8080)

- `build` builds to `build/`

- `test` runs tests. Note that you need to add a `--` before additional cli parameters when running this script through npm.

  e.g. `npm test -- --watch`

- `generate-css-types` will generate Typescript types based on `tailwind.config.js` (and output to `src/tailwindcss-classnames.ts`).

  Use this script when you alter the tailwind config. It runs after npm installation by default.

## Tooling

Changes from [@snowpack/app-template-react-typescript](https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-react-typescript)

include:

- addition of `tailwindcss`, `tailwindcss-classnames`, and their dependencies

- modification of Typescript `baseUrl` (from `./` to `./src`)

- usage of experimental `skypack` source in `snowpack.config.js`

### Tailwind

Besides the ability to use tailwind directives as usual, this template uses [tailwindcss-classnames](https://www.npmjs.com/package/tailwindcss-classnames) to allow type-checked usage and composition of tailwind classnames _outside_ of the `className` prop.

The `generate-css-types` npm script connects this tool to the customizations you make in `tailwind.config.js`

For instance:

```tsx

// Note: imports from src/tailwindcss-classnames, not the actual npm package. See compilerOptions.baseUrl in tsconfig.json

import { classnames } from 'tailwindcss-classnames';

const bg = classnames('bg-ch-pink');

const Example = () => (

  


    Tailwind, with built-in tooling for custom configs

  

);

```


This pairs extremely well with the [Tailwindcss IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

package.

### Why Skypack?

1. It makes the dev server's startup time ludicrous

2. It's super easy to disable (remove or comment out the `experimental` portion of `snowpack.config.js`)

### Yarn

> Not applicable if you used `npx create-snowpack-app new-app --template snowpack-react-typescript-tailwind`

Remove `yarn.lock` if you want to switch package managers (i.e. npm, etc)