https://github.com/phucbm/tailwindcss-components

A collection of ready-to-use helper components for Tailwind CSS that provide common layout patterns and utilities.
https://github.com/phucbm/tailwindcss-components

tailwindcss tailwindcss-plugin tailwindcss-v3

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/phucbm/tailwindcss-components
• Owner: phucbm
• License: mit
• Created: 2025-04-29T07:50:45.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-26T09:28:54.000Z (about 1 year ago)
• Last Synced: 2025-11-15T21:06:36.256Z (8 months ago)
• Topics: tailwindcss, tailwindcss-plugin, tailwindcss-v3
• Language: JavaScript
• Homepage: https://deepwiki.com/phucbm/tailwindcss-components
• Size: 44.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# @phucbm/tailwindcss-components

[![release](https://badgen.net/github/release/phucbm/tailwindcss-components/)](https://www.npmjs.com/package/@phucbm/tailwindcss-components)

[![npm weekly download](https://badgen.net/npm/dm/@phucbm/tailwindcss-components)](https://www.npmjs.com/package/@phucbm/tailwindcss-components)

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

## Installation

```bash

# 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:

```js

// tailwind.config.js

module.exports = {

  // ...

  plugins: [

    require('@phucbm/tailwindcss-components'),

    // ...other plugins

  ],

}

```

## Available Components

### Flex Layout Helpers

Easily center content with flexbox.

```html

Centers both horizontally and vertically

Centers vertically only

Centers horizontally only

```


### Absolute Positioning Helpers

Position elements absolutely with ease.

```html

Centers absolutely both horizontally and vertically

Centers absolutely vertically only

Centers absolutely horizontally only

Covers its parent completely

Pseudo-element ::before covers parent

Pseudo-element ::after covers parent

Both pseudo-elements cover parent

```


### Image Size Helpers

Handle image sizing with ease.

```html



   





   



```


### List Style Helpers

Clean list styling without bullets or padding.

```html



  
Item without bullets or padding





  


    
Item without bullets or padding

  



```


### Transition Helpers

Add simple transitions.

```html

Element with standard transition (.25s)

Element with slow transition (.6s)

```


### Loading Helpers

Add loading spinners and overlays.

```html



  Content with loading overlay and spinner



```


You can customize the loading appearance with CSS variables:

```css

: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`.

```html



  
Item 1

  
Item 2

  
Item 3

  





  



```


You can customize gap sizes using the provided utilities:

```html



    





    





    



```


### Skeleton Background

Add skeleton loaders.

```html



  Loading content placeholder with animated spinner



```


## License

MIT