https://github.com/hacknug/tailwindcss-text-indent

Text-indent utilities for Tailwind CSS.
https://github.com/hacknug/tailwindcss-text-indent

Last synced: about 2 months ago
JSON representation

Text-indent utilities for Tailwind CSS.

• Host: GitHub
• URL: https://github.com/hacknug/tailwindcss-text-indent
• Owner: hacknug
• Created: 2018-07-06T19:04:16.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-07-27T12:15:14.000Z (2 months ago)
• Last Synced: 2024-07-27T13:33:27.253Z (2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwindcss-text-indent
• Size: 661 KB
• Stars: 24
• Watchers: 3
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Tailwind CSS Text Indent Plugin

This plugin adds utilities to use text-indent with Tailwind CSS.

## Installation

Add this plugin to your project:

```bash

# Install using pnpm

pnpm install --save-dev tailwindcss-text-indent

# Install using npm

npm install --save-dev tailwindcss-text-indent

# Install using yarn

yarn add -D tailwindcss-text-indent

```

## Usage

```js

// tailwind.config.js

{

  theme: { // defaults to these values

    textIndent: (theme, { negative }) => ({

      ...{

        // sm: '2rem',

        // md: '3rem',

        // lg: '4rem',

      },

      ...negative({

        // sm: '2rem',

        // md: '3rem',

        // lg: '4rem',

      }),

    }),

  },

  variants: { // all the following default to ['responsive']

    textIndent: ['responsive'],

  },

  plugins: [

    require('tailwindcss-text-indent')(), // no options to configure

  ],

}

```

```css

.indent-sm { text-indent: 2rem; }

.indent-md { text-indent: 3rem; }

.indent-lg { text-indent: 4rem; }

.-indent-sm { text-indent: -2rem; }

.-indent-md { text-indent: -3rem; }

.-indent-lg { text-indent: -4rem; }

```