https://github.com/broskees/gutenberg-tailwind-safelist
Creates a safelist in your Tailwind config for all the Tailwind classes used in the Wordpress/Gutenberg editor.
https://github.com/broskees/gutenberg-tailwind-safelist
acorn blocks gutenberg roots-io sage-theme sage10 wordpress
Last synced: 4 days ago
JSON representation
Creates a safelist in your Tailwind config for all the Tailwind classes used in the Wordpress/Gutenberg editor.
- Host: GitHub
- URL: https://github.com/broskees/gutenberg-tailwind-safelist
- Owner: broskees
- License: mit
- Created: 2023-03-08T07:00:37.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-08T15:14:28.000Z (about 1 year ago)
- Last Synced: 2025-04-02T22:22:48.878Z (about 2 months ago)
- Topics: acorn, blocks, gutenberg, roots-io, sage-theme, sage10, wordpress
- Language: PHP
- Homepage:
- Size: 35.2 KB
- Stars: 10
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Gutenberg Tailwind Safelist
Creates a safelist in your Tailwind config for all the Tailwind classes used in the Wordpress/Gutenberg editor. For use with [Sage 10](https://roots.io/sage).
## Requirements
- [Sage](https://github.com/roots/sage) >= 10.0
## Installation
Add this to the `repositories` section of your composer.json file:
```json
{
"type": "vcs",
"url": "https://github.com/broskees/gutenberg-tailwind-safelist.git"
}
```
Install via Composer:
```bash
$ composer require broskees/gutenberg-tailwind-safelist
```
## Usage
### Getting Started
Start by publishing the `config/tailwind.php` configuration file using Acorn.
```bash
$ wp acorn vendor:publish --provider="Broskees\GutenbergTwSafelist\GutenbergTwSafelistServiceProvider"
```
Next, create the database table:
```bash
$ wp acorn updatetwdb
```
Finally add this code to your `tailwind.config.cjs` file:
On top:
```js
const
fs = require('fs'),
path = require('path'),
Buffer = require('buffer').Buffer,
classesString = fs.readFileSync(path.resolve(__dirname, 'gutenberg-classes.txt'), 'utf8') ?? '',
classesBuffer = Buffer.from(classesString, 'base64') ?? false,
classes = classesBuffer ? classesBuffer.toString().split(' ') : []
```
After `content`:
```js
safelist: classes,
```
**That's It!**
Your gutenberg tailwind classes will automatically be added to the `tailwind.config.cjs` file and `yarn build:prod` will be executed everytime a post is executed (if new classes are found).
## Todo
- Create packagist package
- Classes should be filtered for only tailwind classes with Regex, so only tailwind classes are added to the safelist (Help Wanted)
- Different filtering will eventually be put in place for different versions of Tailwind (Help Wanted)
## Bug Reports
If you discover a bug in Gutenberg Tailwind Safelist, please open an issue.
## Contributing
Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.
## License
Gutenberg Tailwind Safelist is provided under the [MIT License](./LICENSE.md).