Mastodon hachyterm.io

How to Setup React Typescript With Snowpack and Daisy UI

This weekend I wanted to setup a new playground for testing out some React concepts. I’ve decided to use Snowpack and Daisy UI. …

Last modified:

This weekend I wanted to setup a new playground for testing out some React concepts.

I’ve decided to use Snowpack and Daisy UI.

Snowpack is a new build tool and bundler for JavaScript web applications. Under the hood it uses esbuild. esbuild was written in Go and is very fast.

Snowpack offers a development server and hot module replacement. It comes with a few plugins and templates to speed up setup, but its far from a zero-config tool.

DaisyUI is a wrapper around Tailwind CSS, the utility-first CSS framework. DaisyUI offers convenient components that remind of the well-known Bootstrap framework. For example, you can style a button with a simple btn btn-primary class in your HTML instead of stringing together several utility classes like inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600.

In this article, I’ll offer a “Getting started” for React with TypeScript and Daisy UI, using Snowpack.

The blog post borrows from Adding Tailwind CSS to React Snowpack Project which helped me bring all parts together.

Snowpack Setup

Use the snowpack template for creating a new app. You’ll need Node.js. Node.js comes with the command line utility npx.

Type the following command into your terminal:

npx create-snowpack-app react-daisyui \
--template @snowpack/app-template-react-typescript \
--use-pnpm

Here we create a new application called react-daiyui with the template for React and TypeScript.

I use pnpm as the package manager of my choice, but you can use npm or yarn if you want.

Tailwind CSS

Navigate into the project directory:

cd daisy-ui

Sanity check! Try to start the project:

pnpm run start # or npm run start

It should now work.

Let’s install Tailwind CSS, Daisy UI and its needed companions as development dependencies:

pnpm add -D @snowpack/plugin-postcss postcss postcss-cli \
tailwindcss autoprefixer daisyui

Now we need to configure all parts so that they work together.

Adjust the snowpack.config.mjs file in your project:

/** @type {import('snowpack').SnowpackUserConfig } */
export default {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
+    '@snowpack/plugin-postcss',
   /* ... */
   ],
  devOptions: {
+     tailwindConfig: './tailwind.config.js',
  },
  buildOptions: {
    /* ... */
  },
};

Create a new file called postcss.config.js with the following content:

const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')

const plugins = [tailwindcss, autoprefixer]

module.exports = { plugins }

Optional: cssnano

You can use the package cssnano to optimize the production build.

Install via pnpm/npm:

pnpm add -D cssnano

Use this postcss.config.js:

const cssnano = require("cssnano")
const tailwindcss = require("tailwindcss")
const autoprefixer = require("autoprefixer")

const plugins =
  process.env.NODE_ENV === "production"
    ? [tailwindcss, autoprefixer, cssnano]
    : [tailwindcss, autoprefixer]

module.exports = { plugins }

Tailwind Configuration

Now we need to create a configuration file for Tailwind CSS. Create a new file called tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
  plugins: [require('daisyui')],
}

If you want, you can configure Daisy UI in this file, too. See the config section of the Daisy UI docs.

Now open the src/index.css file that snowpack generated for us. At the beginning of the file, add the following lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

Sanity check! We can now add a new button that’s styled with Daisy UI to our src/App.tsx file:

interface AppProps {}

function App({}: AppProps) {
  return <button class="btn btn-primary">DaisyUI Button</button>
}

export default App

It should now work!