🍫 tidbits

If you want TypeScript types for your TailwindCSS configuration and theme, add JavaScript type annotations in tailwind.config.js, for example:

/**
 * @type {import('tailwindcss/tailwind-config').TailwindConfig & {
 *   theme: {
 *     fontFamily: {
 *       mono: string
 *       sans: string
 *     }
 *   }
 * }}
 */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontFamily: {
      sans: "Inter, Helvetica, sans-serif",
      mono: "Fira Sans, Monaco, Courier, monospace",
    },
  },
};

You can then import these types and apply them to the resulting Tailwind theme:

import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../tailwind.config.js";

const tailwind = resolveConfig(tailwindConfig) as typeof tailwindConfig;

Note that a theme (tailwind variable here) is a transformation of the configuration (module.exports). The final type you want is the theme, not the configuration. In this example, they're both the same.

(2022-06-13)

When setting up Remix + TailwindCSS + Mantine, the trick is in emotionOptions — without it, TailwindCSS styles take over, buttons look white & white, etc.

<MantineProvider
  emotionOptions={{ key: "mantine", prepend: false }}
  theme={{
    fontFamily: tailwind.theme.fontFamily.sans,
    fontFamilyMonospace: tailwind.theme.fontFamily.mono,
  }}>

(2022-06-13)

You can get the current timezone for a website visitor with:

Intl.DateTimeFormat().resolvedOptions().timeZone;

• You can use this to pick the default preferred timezone for the user
• But do allow users to change their timezone from the default
• The current timezone may not be the user's preferred timezone (eg when traveling)
• People move around and their preferred timezone changes from time to time

Supported in all the modern browsers.

(2020-03-22)

If you're using esbuild to bundle a Node module into ESM, you may run into an error that looks like this:

throw new Error('Dynamic require of "' + x2 + '" is not supported');

ESM Node modules do not have access to require. You're seeing this error either because your code is using require, or more likely, your code imports 3rd party module that uses require.

At which point you have two options:

• Use the --external:[module] command-line argument to tell esbuild to not bundle the 3rd party module with your module
• Use the --inject:./require_shim.js command-line argument to shim require

// require_shim.js
import { createRequire } from "module";
global.require = createRequire(import.meta.url);

(2021-01-08)

If you're using Docusaurus.io, and you see this error when running npx docusaurus build, make sure you have a static directory.

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. - options.patterns should be a non-empty array.

mkdir static
touch static/.empty

(2022-01-03)