A pre-configured template for Snowpack with React, TypeScript, and TailwindCSS
MIT License
Built off of @snowpack/app-template-react-typescript.
Demo at snowpack-react-typescript-tailwind.vercel.app
npx create-snowpack-app new-app --template snowpack-react-typescript-tailwind [--use-yarn | --use-pnpm | --no-install]
cd new-app
to switch to your project directory.npm start
to run the dev server.Replace new-app
with the name of your application.
start
will open a browser tab at 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.npm test -- --watch
generate-css-types
will generate Typescript types based on tailwind.config.js
(and output to src/tailwindcss-classnames.ts
).Changes from @snowpack/app-template-react-typescript include:
tailwindcss
, tailwindcss-classnames
, and their dependenciesbaseUrl
(from ./
to ./src
)skypack
source in snowpack.config.js
Besides the ability to use tailwind directives as usual, this template uses 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:
// 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 = () => (
<p className={classnames(bg, 'text-black')}>
Tailwind, with built-in tooling for custom configs
</p>
);
This pairs extremely well with the Tailwindcss IntelliSense package.
experimental
portion of snowpack.config.js
)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)