https://github.com/kellymears/tailwind-gutenberg-components

A Tailwind plugin for WordPress theme developers.
https://github.com/kellymears/tailwind-gutenberg-components

Last synced: 9 days ago
JSON representation

A Tailwind plugin for WordPress theme developers.

• Host: GitHub
• URL: https://github.com/kellymears/tailwind-gutenberg-components
• Owner: kellymears
• Created: 2019-05-25T06:27:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-09-02T22:15:47.000Z (about 3 years ago)
• Last Synced: 2024-10-19T01:32:19.612Z (22 days ago)
• Language: JavaScript
• Size: 27.3 KB
• Stars: 102
• Watchers: 16
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind/Gutenberg

> A Tailwind plugin for WordPress theme developers.

⚠️ 8️⃣ung! Work-in-progress! PRs welcome. All one or none! Long life and eternal happiness. Wash with Doc Bronners, 18 uses, three times daily! In all we do let us be generous with our commits!

## Current modules

- `aspect-ratios.js`

- `block-content.js`

- `block-cover.js`

- `block-embed.js`

- `block-image.js`

- `block-table.js`

- `block-video.js`

- `colors.js`

- `columns.js`

- `figcaption.js`

- `group.js`

- `typography.js`

## Contributing

Honestly, thanks! This thing cannot succeed without community support and contributions. 🍻

`Tailwind/Gutenberg` is broken into modules to the extent that it can be so as to not  wastefully generate classes which aren't utilized.

If submitting a PR:

### Do not utilize default theme() keys in your module code

In your module avoid utilizing theme configuration values outside of the `theme.gutenberg` key.

**Example:**

```js

  // 🚫 Bad

  const cover = ({

    '.wp-block-cover': {

      paddingTop: theme('spacing.2xl'),

    }

  })

  // 🤟🏽 Good

  const options = theme('gutenberg.blocks.cover')

  const cover = ({

    '.wp-block-cover': {

      paddingTop: theme('gutenberg.spacing.vertical.default'),

    }

  })

}

```

The one exception to utilizing `theme()` is when providing default values in `tailwind.config.js`, and in that case you should absolutely use it and stick to keys found in the stock tailwind config file.

### Do not hardcode property values

Try not to set values directly. Try to source everything from the configuration file.

**Example:**

```js

  // 🚫 Bad

  const cover = ({

    '.wp-block-cover': {

      paddingTop: '2rem',

    }

  })

  // 🤟🏽 Good

  const options = theme('gutenberg.blocks.cover')

  const cover = ({

    '.wp-block-cover': {

      paddingTop: options.verticalPadding,

    }

  })

}

```

## Thanks!