tailwind preset

A tailwind preset mostly focused spacing and typography.

Installation

yarn add -D @alexmchan/preset-tailwind @tailwindcss/typography prettier-plugin-tailwindcss

example tailwind.config.js next config

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@alexmchan/preset-tailwind')],
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: ['@tailwindcss/typography'],
}

Theme

theme

Some defaults for spacing and font sizes that don't require memorizing the m-1 scale and instead can use m-4px, still converts to rem under the covers and doesn't require using arbitrary values like mt-[4px]

Typography

typography