Content Placeholder for Tailwind CSS

A plugin to create utility classes for Content Placeholders.

Contents

• Demo
• About
• How does it work
• Installation
• How to use
• Configuration
• Sample Configuration

Demo

You can see a working demo App here: https://javisperez.github.io/tailwindcontentplaceholder/

About

This is a Tailwind CSS Plugin to create utility classes for Content Placeholder and make it easier to display the loading state of resources.

How does it work

Based on a given configuration file it creates a dynamic background image in the pseudo-elements and adds an (optional) opacity animation.

Installation

With NPM:

npm install tailwind-content-placeholder

Or if using Yarn:

yarn add tailwind-content-placeholder

How to use

In your tailwind.config.js file, include the plugin and initiate it with the proper configuration.

Example

module.exports = {
  plugins: [
    require('tailwind-content-placeholder')({
      placeholders: {
        'paragraph': {
          height: 4, // the height of the container in em
          rows: [ // This class will have 4 rows:
            [100], // A 100% width row
            [100], // Another 100% width row
            [40], // A 40% width row
            [] // And an empty row, to create separation
          ]
        },
      }
    }),
  ],
}

After that, you'll have a set of utilities classes you can use to show the placeholder:

<div :class="{ 'cp-paragraph': isLoading }">
  {{ content }}
</div>

The classes will be prefixed by the given custom prefix or will use cp- by default.

Configuration

The configuration values that can be passed to the plugin are:

Option	Type	Default	Description
prefix	String	cp	The prefix to use when generating the utility classes.
borderRadius	Number	4	Border radius value for the corners of each rendered line.
animationDuration	String	"1.4s"	Duration of the animation in a CSS format.
animated	Boolean	true	Enable/Disable the background opacity animation.
bgColor	String	"rgba(0, 0, 0, 0.1)"	Background color for each line in CSS format.
height	Number, String	1	Height of the wrapper. If a number is given will be considered em.
width	Number, String	"80%"	Width of the wrapper in CSS format. If a number is given, will be consider %.
placeholders	Placeholder[], String	[]	Collection of objects with configuration and rows to render. A multiline string can also be given, in which a # character represents 10% width and spaces represent 10% separation. eg.: ## ## will produce 20% blocks with a 20% space separation and another 20% block, in just one single row.

Placeholder

The placeholders property is an object which keys must be the name of the CSS class to generate and the values a configuration object with the keys:

Option	Type	Default	Description
height	Number	Config.height	The height for this specific content, in em. If not specified, the global configuration height is used.
width	String	Config.width	The width for this specific content in CSS format. If not specified, the global configuration width is used.
rows	Multidimensional Array	[]	The rows and segments/lines to render. The segments of lines are Integers that represents the percentage of the width to use. For example, for a full width line, a [100] value should be passed. For two segments of half the width, [50, 50] should be given. This is a multi dimensional array, the first dimension are the rows while each row contains the segment.

Alternatively the Placeholder can be a string created with # characters, spaces and linebreaks.

Sample Configuration

This configuration would create two CSS classes called ".cp-line" and ".cp-list" but it is completely customizable:

{
  width: '50%', // Only use the 50% of the container width
  placeholders: {
    // Create a single line content placeholder
    'line': {
      rows: [
        [70] // One row only, with 70% width
      ]
    },
    // Create a "bullet list" like content placeholder
    'list': {
      height: 4, // As this is a sample list, we'll make it a 4 lines placeholder
      rows: [
        [20, 80], // A line with a 20% width segment to simulate the bullet and a 80% width line of content
        [20, 60], // A line with a 20% width segment to simulate the bullet and a 60% width line of content
        [20, 75], // A line with a 20% width segment to simulate the bullet and a 75% width line of content
        [20, 70], // A line with a 20% width segment to simulate the bullet and a 70% width line of content
      ]
    },
  }
}