Package Exports

@phucbm/tailwindcss-components
@phucbm/tailwindcss-components/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@phucbm/tailwindcss-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@phucbm/tailwindcss-components

A collection of ready-to-use helper components for Tailwind CSS that provide common layout patterns and utilities.

Installation

# Using npm
npm install @phucbm/tailwindcss-components

# Using yarn
yarn add @phucbm/tailwindcss-components

# Using pnpm
pnpm add @phucbm/tailwindcss-components

Usage

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@phucbm/tailwindcss-components'),
    // ...other plugins
  ],
}

Available Components

Flex Layout Helpers

Easily center content with flexbox.

<div class="fl-center">Centers both horizontally and vertically</div>
<div class="fl-center-v">Centers vertically only</div>
<div class="fl-center-h">Centers horizontally only</div>

Absolute Positioning Helpers

Position elements absolutely with ease.

<div class="ab-center">Centers absolutely both horizontally and vertically</div>
<div class="ab-center-v">Centers absolutely vertically only</div>
<div class="ab-center-h">Centers absolutely horizontally only</div>
<div class="ab-full">Covers its parent completely</div>
<div class="ab-full-b">Pseudo-element ::before covers parent</div>
<div class="ab-full-a">Pseudo-element ::after covers parent</div>
<div class="ab-full-ba">Both pseudo-elements cover parent</div>

Image Size Helpers

Handle image sizing with ease.

<div class="img-wrapper-cover">
  <img src="..." alt="..."> <!-- Will cover the container -->
</div>

<div class="img-wrapper-contain">
  <img src="..." alt="..."> <!-- Will be contained in the container -->
</div>

List Style Helpers

Clean list styling without bullets or padding.

<ul class="list-style-none">
  <li>Item without bullets or padding</li>
</ul>

<div class="list-style-none">
  <ul>
    <li>Item without bullets or padding</li>
  </ul>
</div>

Transition Helpers

Add simple transitions.

<div class="t">Element with standard transition (.25s)</div>
<div class="t t-slow">Element with slow transition (.6s)</div>

Loading Helpers

Add loading spinners and overlays.

<div class="loading">
  Content with loading overlay and spinner
</div>

You can customize the loading appearance with CSS variables:

:root {
  --loading-size: 50px;
  --loading-color: blue;
  --loading-bg: rgba(255, 255, 255, 0.9);
}

Flex Grid Template

A flexible grid system using flexbox.

Unlike CSS Grid, flex-grid-template leverages Flexbox to provide superior item alignment capabilities like justify-content:center, what you can't do with tailwind's grid.

<div class="flex-grid-template">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- Default is 3 columns, responsive down to 1 -->
</div>

<div class="flex-grid-template flex-grid-col-4">
  <!-- 4 columns -->
</div>

You can customize gap sizes using the provided utilities:

<!-- Using Tailwind's spacing scale -->
<div class="flex-grid-template flex-grid-gap-4">
    <!-- Both x and y gaps set to 1rem (4 in the spacing scale) -->
</div>

<div class="flex-grid-template flex-grid-gap-x-8 flex-grid-gap-y-2">
    <!-- X gap: 2rem (8), Y gap: 0.5rem (2) -->
</div>

<!-- Or with inline styles for custom values -->
<div class="flex-grid-template" style="--grid-gap-x: 20px; --grid-gap-y: 40px;">
    <!-- Custom gaps -->
</div>

Skeleton Background

Add skeleton loaders.

<div class="skeleton-bg">
  Loading content placeholder with animated spinner
</div>

License

MIT