@settld/tailwindcss-config

Shared Tailwind CSS preset for web development projects.

How to use

There are two files index.js and plugin.js in the shared prest.

Custom design tokens

Change design tokens like colors, typography and breakpoints in index.js, below is an example.

const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    colors: {
      ...colors,

      // Add user custom colors here
      primary: colors.blue,
      secondary: colors.indigo,
    },

    fontFamily: {
      ...defaultTheme.fontFamily,

      // Add user custom font family here
      brand: ['Barlow', 'sans-serif'],
    },

    // Add user custom breakpoints here
    screens: {
      xs: '368px',
      sm: '686px',
      md: '1024px',
      lg: '1220px',
    },
  },
};

Add/Change base classes

If there are some user customize tailwindcss classes you will to use in project frequently, you should add them in index.js, below is an example.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    borderRadius: {
      ...defaultTheme.borderRadius,

      // Add user custom here
      half: '50%',
      third: '33.3%',
    },
  },
};

Use official or custom tailwindcss plugins

For official plugins, you should install it with pnpm, then require it in plugin list, for local plugin, just require the relative path of the plugin.

/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  plugins: [
    // An official plugin
    require('@tailwindcss/forms'),

    // An user defined local plugin
    require('./plugin'),
  ],
};

Add tailwindcss utilities with custom plugin

We can define a local plugin to add more utilities to tailwindcss, write utility block in CSS-in-JS format, below is a example.

const plugin = require('tailwindcss/plugin');

module.exports = plugin(({ addUtilities, theme }) => {
  addUtilities({
    '.overlay': {
      position: 'absolute',
      right: 0,
      left: 0,
      height: '100%',
      width: '100%',
      overflow: 'hidden',
    },
  });
});