Skip to content
This repository was archived by the owner on Sep 25, 2020. It is now read-only.

tailwindlabs/tailwindcss-plugin-examples

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind CSS Example Plugins

To get started, clone the project and install the dependencies:

# Using npm
npm install

# Using Yarn
yarn

After that, you can process the CSS by running:

# Using npm
npm run build

# Using Yarn
yarn run build

Load up ./index.html in your browser and you're off to the races!

Object-Fit Utilities

In plugins/object-fit/index.js you'll find an example of a plugin that adds a set of simple, non-configurable utility classes for the object-fit property.

The only option it exposes are the variants you'd like to generate (responsive, hover, focus, etc.), which you pass to the plugin as a simple array:

module.exports = {
  // ...

  plugins: [
    // ...
    require('./plugins/object-fit')(['responsive']),
  ],
}

This is just about the simplest type of plugin you could make.

Simple Buttons

In plugins/simple-buttons/index.js you'll find an example of a plugin that adds new button component classes.

This plugin exposes quite a number of configuration options (all optional), which can be passed to the plugin as an object:

module.exports = {
  // ...

  plugins: [
    // ...
    require('./plugins/simple-buttons')({


      // Set some default styles for all buttons.
      borderRadius: '.25rem',   // Default: .25rem
      fontWeight: '600',        // Default: 600
      lineHeight: '1.25',       // Default: 1.25
      fontSize: '1rem',         // Default: 1rem
      padding: '.5rem 1rem',    // Default: .5rem 1rem


      // Specify the button colors you'd like to generate.
      // 
      // By default, buttons are generated for all of Tailwind's
      // default base colors.
      colors: {
        // Class name: `.btn-primary`
        primary: {
          background: colors['blue'],
          text: colors['white'],
        },
        // Class name: `.btn-secondary`
        secondary: {
          background: colors['grey'],
          text: colors['black'],
        },
      },


      // Specify additional button sizes you'd like to generate.
      // 
      // You can override any of the default styles from above
      // at any given button size.
      sizes: {
        sm: {
          fontSize: '.875rem',
          padding: '.5rem .75rem',
        },
        lg: {
          fontSize: '1.25rem',
          padding: '.75rem 1.5rem',
          borderRadius: '.5rem',
        }
      }
    }),
  ],
}

About

Examples to help you get started building your own Tailwind CSS plugins.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •