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:

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
      ]
    },
  }
}