{"id":13759376,"url":"https://github.com/generoi/tailwindcss-gutenberg","last_synced_at":"2025-12-24T17:12:52.782Z","repository":{"id":47648265,"uuid":"190568147","full_name":"generoi/tailwindcss-gutenberg","owner":"generoi","description":null,"archived":false,"fork":false,"pushed_at":"2021-03-20T16:30:26.000Z","size":13,"stargazers_count":69,"open_issues_count":6,"forks_count":12,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-30T13:49:48.753Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/generoi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-06T11:14:17.000Z","updated_at":"2025-03-05T10:44:30.000Z","dependencies_parsed_at":"2022-09-23T15:02:20.233Z","dependency_job_id":null,"html_url":"https://github.com/generoi/tailwindcss-gutenberg","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/generoi/tailwindcss-gutenberg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generoi%2Ftailwindcss-gutenberg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generoi%2Ftailwindcss-gutenberg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generoi%2Ftailwindcss-gutenberg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generoi%2Ftailwindcss-gutenberg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/generoi","download_url":"https://codeload.github.com/generoi/tailwindcss-gutenberg/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generoi%2Ftailwindcss-gutenberg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28005414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:00:51.947Z","updated_at":"2025-12-24T17:12:52.759Z","avatar_url":"https://github.com/generoi.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# tailwindcss-gutenberg\n\nThis plugin adds unopinionated utilities and components for the Gutenberg Block Editor. It's purpose is not to style the actual blocks which you can either do yourself or let WordPress handle for you with [`add_theme_support('wp-block-styles');`](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#default-block-styles). If you want a plugin that will let you style the actual blocks as components, have a look at [tailwind-gutenberg-components](https://github.com/kellymears/tailwind-gutenberg-components).\n\nPersonally I encourage you to try working with WordPress own block styling as it will make it easier to include your entire stylesheet in the block editor and have your styles applied on both the front-end and the back-end.\n\nBy using the core styling and this plugin you're basically left with minor adjustments, styling buttons and defining gutters between blocks. All of which are too opinionated for any plugin to handle.\n\n### Features:\n\n##### gutenberg.colors\n\nBlock Color Palette utility classes `has-X-background-color`, `has-Y-color`.\n\n##### gutenberg.foregroundColors\n\nLow specificity foreground color components for the background color classes `has-X-background-color`. It will pick a foreground color with high contrast so a dark color is used on light backgrounds and vice versa. This might require you to inherit the color value on some block subelements.\n\nIf you need to be more specific, just add a custom style to your stylesheet, this is just meant for a decent out-of-the-box experience.\n\n##### gutenberg.fontSizes\n\nBlock Font Size utility classes `has-X-font-size`.\n\n##### gutenberg.alignments\n\nAdd the otherwise missing alignment components for alignwide and alignfull as well as responsive versions of alignleft and alignright.\n\n\u003cimg src=\"https://i.imgur.com/xwCnjVz.gif\" width=\"640\" height=\"400\"\u003e\n\nThis styling depends on the wrapper having a width and then `alingwide` and `alignfull` will break out of it. You might also need to hide `overflow-x` on the html element.\n\n##### gutenberg.admin\n\nFix some bugs in the block editor back-end that haven't been fixed upstream and reset the alignment styling added here so they do not break the editor experience.\n\nThis assumes you're enqueuing the entire stylesheet with [`add_editor_style`](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#enqueuing-the-editor-style).\n\n### Example\n\n```js\nconst gutenberg = require('tailwindcss-gutenberg');\n\nmodule.exports = {\n  theme: {\n    // ....\n    gutenberg: (theme) =\u003e ({\n\n      // Create block color palette utility classes that WordPress uses.\n      // @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes\n      colors: {\n        primary: theme('colors.primary'),\n        secondary: theme('colors.secondary'),\n        black: theme('colors.black'),\n        white: theme('colors.white'),\n      },\n\n      // If set, will pick the color with most contrast as the foreground text\n      // color for block background color components.\n      foregroundColors: [\n        theme('colors.black'),\n        theme('colors.white'),\n      ],\n\n      // Create block font size utility classes that WordPress uses.\n      // https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes\n      fontSizes: {\n        xs: theme('fontSize.xs'),\n        sm: theme('fontSize.sm'),\n        base: theme('fontSize.base'),\n        xl: theme('fontSize.xl'),\n        xxl: theme('fontSize.2xl'),\n      },\n\n      alignments: {\n        // Scrollbar width which defaults to macOS 0px but requires overflow-x\n        // hidden on \u003chtml\u003e. If that's a dealbreaker set it to 15px and some\n        // users might have a small gutter.\n        scrollbarWidth: '15px',\n\n        // Content areas default width without alignments required when using\n        // `sizer` property.\n        contentWidth: '672px',\n\n        // A max width cap for alignfull and alignwide\n        maxWidth: '1600px',\n\n        // Enable with a truthy value\n        alignfull: true,\n\n        // Core Group blocks default to 30px side padding.\n        backgroundGutter: '30px',\n\n        // Or override the above configurations per alignment type.\n        alignwide: {\n          // Add a minimum gutter on the left and right of the alignment\n          gutter: theme('spacing.1'),\n\n          // Add a sizing factor to fluidly grow the alignment.\n          // Use values between 1.0 and 1.99 where lower means tighter to\n          // viewport edge and larger means further.\n          // NOTE the values of maxWidth, contentWidth and gutter all have\n          // to use the same units for this to work. calc() in media queries\n          // does not have good browser support\n          sizer: 1.25,\n        },\n\n        // Add responsive alignleft and alignright support.\n        alignleftright: {\n\n          // Screen size when alignment is triggered, defaults to an arbitrary\n          // 640px\n          minWidth: theme('screens.sm'),\n\n          // Side margin, defaults to core's 1em.\n          margin: theme('spacing.2'),\n        },\n      },\n    }),\n  },\n  plugins: [\n    // Block Editor Color Palette utilities\n    gutenberg.colors,\n\n    // Block Editor Font Size utilities\n    gutenberg.fontSizes,\n\n    // Foreground color components for Block Editor background colors.\n    gutenberg.foregroundColors,\n\n    // Alignment support\n    gutenberg.alignments,\n\n    // Block Editor back-end styling fixes wrapped as components.\n    gutenberg.admin,\n  ],\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeneroi%2Ftailwindcss-gutenberg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeneroi%2Ftailwindcss-gutenberg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeneroi%2Ftailwindcss-gutenberg/lists"}