How to use tailwindcss - 10 common examples

// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js

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

module.exports = {
  theme: {
    container: {
      center: true,
      padding: '1rem',
    },
    extend: {
      colors: {
        primary: 'var(--primary)',
      },
      fontFamily: {
        sans: [...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    function({ addVariant, e }) {
      addVariant('disabled', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`disabled${separator}${className}`)}:disabled`;
        });
      });
    },
  ],
};

removeDeprecatedGapUtilities: true,
  },
  purge: [
    './config/*.php',
    './src/**/*.php',
    './resources/views/**/*.php',
    './resources/js/**/*.js',
    '../field-file/resources/views/**/*.php', // used for locally developing sibling packages
  ],
  theme: {
    extend: {
      colors: {
        current: 'currentColor',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    backgroundColor: [
      'responsive',
      'hover',
      'group-hover',
      'focus',
      'active',
      'even',
      'odd',
      'dark',
      'dark-hover',
      'dark-group-hover',
      'dark-even',

plugins: () => [
            postcssFlexbugsFixes,
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
            tailwindcss(path.resolve(__dirname, './tailwind.config.js')),
          ],
        },

postcssPlugins(tailwindConfigFile) {
    const plugins = [
      postcssImport(),
      tailwind(tailwindConfigFile),
      postcssNested,
    ];

    // Add more plugins when building
    if (!this.isProduction()) {
      return plugins;
    }

    // Only keep classes used in files at the same level
    let pathLevel = path.dirname(path.relative('./src', tailwindConfigFile));
    if (pathLevel === '..') {
      pathLevel = '';
    }
    plugins.push(
      postcssPurge({
        content: [`./dist/${pathLevel}/*.html`],

postcssPlugins(tailwindConfigFile) {
    const plugins = [
      postcssImport(),
      tailwind(tailwindConfigFile),
      postcssNested,
    ];

    // Add more plugins when building
    if (!this.isProduction()) {
      return plugins;
    }

    // Only keep classes used in files at the same level
    let pathLevel = path.dirname(path.relative('./src', tailwindConfigFile));
    if (pathLevel === '..') {
      pathLevel = '';
    }
    plugins.push(
      postcssPurge({
        content: [`./docs/${pathLevel}/*.html`],

plugins: () => [
            postcssFlexbugsFixes,
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
            tailwindcss(path.resolve(__dirname, './tailwind.config.js')),
          ],
        },

lineHeight: defaultTheme.lineHeight.normal,
      fontSize: defaultTheme.fontSize.base,
      borderColor: defaultTheme.borderColor.default,
      borderWidth: defaultTheme.borderWidth.default,
      borderRadius: defaultTheme.borderRadius.default,
      backgroundColor: defaultTheme.colors.white,
      focusBorderColor: defaultTheme.colors.blue[400],
      focusBoxShadow: defaultTheme.boxShadow.outline,
      boxShadow: defaultTheme.boxShadow.none,
      checkboxSize: '1em',
      radioSize: '1em',
      checkboxIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"></path></svg>`,
      radioIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><circle r="3" cy="8" cx="8"></circle></svg>`,
      checkedColor: defaultTheme.colors.blue[500],
      selectIcon: `<svg fill="${
        defaultTheme.colors.gray[500]
      }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></path></svg>`,
      selectIconOffset: defaultTheme.spacing[2],
      selectIconSize: '1.5em',
    },
    spinner: theme =&gt; ({
      default: {
        color: '#dae1e7', // color you want to make the spinner
        size: '1em', // size of the spinner (used for both width and height)
        border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
        speed: '500ms', // the speed at which the spinner should rotate
      },
      sm: {
        color: '#dae1e7',
        size: '2.5em',
        border: '2px',
        speed: '500ms',

// Configuration docs:
// https://tailwindcss.com/docs/configuration
//
// Default configuration:
// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js

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

const brand = {
    purple: "#512668",
    orange: "#ee975c",
    green: "#2fc89f",
    blue: "#52a6da",
}

const white = defaultTheme.colors.white;
const black = defaultTheme.colors.black;
const gray = defaultTheme.colors.gray;
const red = defaultTheme.colors.red;
const yellow = defaultTheme.colors.yellow;
const transparent = defaultTheme.colors.transparent;

const purple = {
    100: "#d7cddc",
    200: "#a48bb3",
    300: "#745687",
    400: "#654276",
    500: brand.purple,
    600: "#421d57",
    700: "#371a47",
    800: "#2a1337",
    900: "#180b1f",

// https://tailwindcss.com/docs/configuration
//
// Default configuration:
// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js

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

const brand = {
    purple: "#512668",
    orange: "#ee975c",
    green: "#2fc89f",
    blue: "#52a6da",
}

const white = defaultTheme.colors.white;
const black = defaultTheme.colors.black;
const gray = defaultTheme.colors.gray;
const red = defaultTheme.colors.red;
const yellow = defaultTheme.colors.yellow;
const transparent = defaultTheme.colors.transparent;

const purple = {
    100: "#d7cddc",
    200: "#a48bb3",
    300: "#745687",
    400: "#654276",
    500: brand.purple,
    600: "#421d57",
    700: "#371a47",
    800: "#2a1337",
    900: "#180b1f",
}

'20': '20',
      '30': '30',
      '40': '40',
      '50': '50',
    },
    customForms: {
      horizontalPadding: defaultTheme.spacing[3],
      verticalPadding: defaultTheme.spacing[2],
      lineHeight: defaultTheme.lineHeight.normal,
      fontSize: defaultTheme.fontSize.base,
      borderColor: defaultTheme.borderColor.default,
      borderWidth: defaultTheme.borderWidth.default,
      borderRadius: defaultTheme.borderRadius.default,
      backgroundColor: defaultTheme.colors.white,
      focusBorderColor: defaultTheme.colors.blue[400],
      focusBoxShadow: defaultTheme.boxShadow.outline,
      boxShadow: defaultTheme.boxShadow.none,
      checkboxSize: '1em',
      radioSize: '1em',
      checkboxIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"></path></svg>`,
      radioIcon: `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 16 16"><circle r="3" cy="8" cx="8"></circle></svg>`,
      checkedColor: defaultTheme.colors.blue[500],
      selectIcon: `<svg fill="${
        defaultTheme.colors.gray[500]
      }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></path></svg>`,
      selectIconOffset: defaultTheme.spacing[2],
      selectIconSize: '1.5em',
    },
    spinner: theme =&gt; ({
      default: {
        color: '#dae1e7', // color you want to make the spinner
        size: '1em', // size of the spinner (used for both width and height)