WordPress Specific Classes TailwindCSS

style.css

/* WordPress-specific classes */
.wp-block-quote {
    @apply bg-gray-100 p-8 my-12 border-4 border-black;
}

.wp-block-quote p {
    @apply text-lg font-bold mb-4;
}

.wp-block-quote cite {
    @apply text-lg font-bold mt-4 pt-4 border-t-2 border-gray-300 block;
}

.wp-block-pullquote {
    @apply bg-electric text-black p-8 my-12 border-4 border-black;
}

.wp-block-pullquote p {
    @apply text-xl font-black mb-4;
}

.wp-block-code {
    @apply bg-black text-electric p-4 my-6 border-2 border-black font-mono text-sm;
}

.wp-block-preformatted {
    @apply bg-black text-electric p-4 my-6 border-2 border-black font-mono text-sm;
}

.wp-block-table {
    @apply w-full my-8 border-4 border-black;
}

.wp-block-table table {
    @apply w-full;
}

.wp-block-table th {
    @apply bg-black text-white p-4 font-black text-left border-2 border-white;
}

.wp-block-table td {
    @apply p-4 border-2 border-black font-bold;
}

.wp-block-table tr:nth-child(even) {
    @apply bg-gray-100;
}

/* WordPress alignment classes */
.alignleft {
    @apply float-left mr-6 mb-4;
}

.alignright {
    @apply float-right ml-6 mb-4;
}

.aligncenter {
    @apply block mx-auto my-6;
}

.wp-caption {
    @apply my-6;
}

.wp-caption-text {
    @apply text-sm font-bold mt-2 text-gray-600;
}

/* WordPress gallery */
.wp-block-gallery {
    @apply grid md:grid-cols-2 lg:grid-cols-3 gap-4 my-8;
}

.wp-block-gallery figure {
    @apply m-0;
}

.wp-block-gallery img {
    @apply w-full h-48 object-cover border-2 border-black;
}

/* WordPress buttons */
.wp-block-button {
    @apply my-6;
}

.wp-block-button__link {
    @apply bg-black text-white px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-block;
}

.is-style-outline .wp-block-button__link {
    @apply bg-transparent text-black border-4 border-black hover:bg-black hover:text-white;
}

/* WordPress columns */
.wp-block-columns {
    @apply grid md:grid-cols-2 gap-8 my-8;
}

.wp-block-column {
    @apply space-y-4;
}

/* WordPress separator */
.wp-block-separator {
    @apply border-t-4 border-black my-12;
}

/* WordPress spacer */
.wp-block-spacer {
    @apply my-8;
}

/* WordPress embed */
.wp-block-embed {
    @apply my-8;
}

.wp-block-embed iframe {
    @apply w-full border-4 border-black;
}

/* WordPress image */
.wp-block-image {
    @apply my-8;
}

.wp-block-image img {
    @apply w-full border-4 border-black;
}

/* WordPress list */
.wp-block-list {
    @apply space-y-3 text-lg font-bold mb-8;
}

.wp-block-list li {
    @apply leading-relaxed;
}

/* WordPress heading */
.wp-block-heading {
    @apply font-black;
}

/* WordPress paragraph */
.wp-block-paragraph {
    @apply text-lg font-bold leading-relaxed mb-6;
}

/* WordPress group */
.wp-block-group {
    @apply my-8;
}

/* WordPress cover */
.wp-block-cover {
    @apply relative my-8 border-4 border-black overflow-hidden;
}

.wp-block-cover img {
    @apply w-full h-64 object-cover;
}

.wp-block-cover .wp-block-cover__inner-container {
    @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white p-8;
}

/* WordPress media text */
.wp-block-media-text {
    @apply grid md:grid-cols-2 gap-8 my-8;
}

.wp-block-media-text__media {
    @apply border-4 border-black overflow-hidden;
}

.wp-block-media-text__media img {
    @apply w-full h-64 object-cover;
}

.wp-block-media-text__content {
    @apply p-6;
}

/* WordPress video */
.wp-block-video {
    @apply my-8 border-4 border-black overflow-hidden;
}

.wp-block-video video {
    @apply w-full;
}

/* WordPress audio */
.wp-block-audio {
    @apply my-8 border-4 border-black p-4;
}

/* WordPress file */
.wp-block-file {
    @apply bg-gray-100 p-4 my-6 border-2 border-black;
}

.wp-block-file__button {
    @apply bg-black text-white px-4 py-2 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-block;
}

/* WordPress search */
.wp-block-search {
    @apply my-8;
}

.wp-block-search__input {
    @apply border-4 border-black p-3 font-bold;
}

.wp-block-search__button {
    @apply bg-black text-white px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all;
}

/* WordPress navigation */
.wp-block-navigation {
    @apply my-8;
}

.wp-block-navigation__container {
    @apply flex space-x-4;
}

.wp-block-navigation-link {
    @apply font-bold hover:text-electric transition-colors;
}

/* WordPress social links */
.wp-block-social-links {
    @apply flex space-x-4 my-8;
}

.wp-block-social-link {
    @apply bg-black text-white p-3 brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all;
}

/* WordPress calendar */
.wp-block-calendar {
    @apply my-8 border-4 border-black;
}

.wp-block-calendar table {
    @apply w-full;
}

.wp-block-calendar th {
    @apply bg-black text-white p-2 font-black text-center border-2 border-white;
}

.wp-block-calendar td {
    @apply p-2 border-2 border-black font-bold text-center;
}

/* WordPress latest posts */
.wp-block-latest-posts {
    @apply space-y-4 my-8;
}

.wp-block-latest-posts li {
    @apply font-bold;
}

.wp-block-latest-posts a {
    @apply hover:text-electric transition-colors;
}

/* WordPress categories */
.wp-block-categories {
    @apply space-y-2 my-8;
}

.wp-block-categories li {
    @apply font-bold;
}

.wp-block-categories a {
    @apply hover:text-electric transition-colors;
}

/* WordPress tag cloud */
.wp-block-tag-cloud {
    @apply flex flex-wrap gap-2 my-8;
}

.wp-block-tag-cloud a {
    @apply bg-gray-100 text-black px-3 py-1 font-bold border-2 border-black hover:bg-electric transition-colors;
}

/* WordPress comments */
.wp-block-comments {
    @apply my-8;
}

.wp-block-comment-template {
    @apply space-y-6;
}

.wp-block-comment {
    @apply bg-gray-100 p-6 border-2 border-black;
}

.wp-block-comment-author {
    @apply font-black mb-2;
}

.wp-block-comment-date {
    @apply text-sm text-gray-600 mb-4;
}

.wp-block-comment-content {
    @apply font-bold;
}

/* WordPress post title */
.wp-block-post-title {
    @apply text-4xl md:text-6xl font-black mb-8;
}

/* WordPress post content */
.wp-block-post-content {
    @apply prose prose-xl max-w-none;
}

/* WordPress post excerpt */
.wp-block-post-excerpt {
    @apply text-xl font-bold mb-8;
}

/* WordPress post author */
.wp-block-post-author {
    @apply flex items-center gap-4 my-8;
}

.wp-block-post-author__avatar {
    @apply w-12 h-12 rounded-full border-2 border-black;
}

.wp-block-post-author__name {
    @apply font-black;
}

.wp-block-post-author__bio {
    @apply font-bold text-gray-600;
}

/* WordPress post date */
.wp-block-post-date {
    @apply text-sm text-gray-600 font-bold;
}

/* WordPress post terms */
.wp-block-post-terms {
    @apply flex gap-2 my-4;
}

.wp-block-post-terms a {
    @apply bg-electric text-black px-3 py-1 text-xs font-bold uppercase;
}

/* WordPress post navigation */
.wp-block-post-navigation-link {
    @apply bg-black text-white px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-block;
}

/* WordPress query */
.wp-block-query {
    @apply my-8;
}

.wp-block-query-loop {
    @apply grid md:grid-cols-2 lg:grid-cols-3 gap-8;
}

/* WordPress template parts */
.wp-block-template-part {
    @apply my-8;
}

/* WordPress site title */
.wp-block-site-title {
    @apply text-2xl font-black;
}

.wp-block-site-title a {
    @apply text-black hover:text-electric transition-colors;
}

/* WordPress site tagline */
.wp-block-site-tagline {
    @apply text-lg font-bold text-gray-600;
}

/* WordPress login out */
.wp-block-loginout {
    @apply font-bold;
}

.wp-block-loginout a {
    @apply hover:text-electric transition-colors;
}

/* WordPress page list */
.wp-block-page-list {
    @apply space-y-2 my-8;
}

.wp-block-page-list li {
    @apply font-bold;
}

.wp-block-page-list a {
    @apply hover:text-electric transition-colors;
}

/* WordPress home link */
.wp-block-home-link {
    @apply font-black;
}

.wp-block-home-link a {
    @apply hover:text-electric transition-colors;
}

/* WordPress query title */
.wp-block-query-title {
    @apply text-3xl font-black mb-8;
}

/* WordPress query pagination */
.wp-block-query-pagination {
    @apply flex justify-center gap-4 my-8;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    @apply bg-black text-white px-4 py-2 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all;
}

.wp-block-query-pagination-numbers {
    @apply flex gap-2;
}

.wp-block-query-pagination-numbers a {
    @apply bg-gray-100 text-black px-3 py-2 font-bold border-2 border-black hover:bg-electric transition-colors;
}

.wp-block-query-pagination-numbers .current {
    @apply bg-electric text-black;
}

/* WordPress read more */
.wp-block-read-more {
    @apply bg-black text-white px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-block;
}

/* WordPress more */
.wp-block-more {
    @apply text-center my-8;
}

.wp-block-more .more-link {
    @apply bg-electric text-black px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-block;
}

/* WordPress post comments */
.wp-block-post-comments {
    @apply my-8;
}

.wp-block-post-comments-form {
    @apply space-y-4;
}

.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea {
    @apply border-4 border-black p-3 font-bold w-full;
}

.wp-block-post-comments-form button {
    @apply bg-black text-white px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all;
}

/* WordPress post content */
.wp-block-post-content {
    @apply prose prose-xl max-w-none;
}

/* WordPress post template */
.wp-block-post-template {
    @apply space-y-8;
}

/* WordPress post featured image */
.wp-block-post-featured-image {
    @apply my-8 border-4 border-black overflow-hidden;
}

.wp-block-post-featured-image img {
    @apply w-full h-64 object-cover;
}

/* WordPress post author biography */
.wp-block-post-author-biography {
    @apply bg-gray-100 p-6 border-2 border-black my-8;
}

.wp-block-post-author-biography .wp-block-post-author-biography__name {
    @apply font-black text-xl mb-2;
}

.wp-block-post-author-biography .wp-block-post-author-biography__content {
    @apply font-bold;
}

/* WordPress post comments count */
.wp-block-post-comments-count {
    @apply text-sm text-gray-600 font-bold;
}

/* WordPress post comments link */
.wp-block-post-comments-link {
    @apply font-bold;
}

.wp-block-post-comments-link a {
    @apply hover:text-electric transition-colors;
}

/* WordPress post edit link */
.wp-block-post-edit-link {
    @apply text-sm text-gray-600 font-bold;
}

.wp-block-post-edit-link a {
    @apply hover:text-electric transition-colors;
}

/* WordPress post terms */
.wp-block-post-terms {
    @apply flex gap-2 my-4;
}

.wp-block-post-terms a {
    @apply bg-electric text-black px-3 py-1 text-xs font-bold uppercase;
}

/* WordPress post navigation */
.wp-block-post-navigation-link {
    @apply bg-black text-white px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-block;
}

/* WordPress post navigation link */
.wp-block-post-navigation-link-previous,
.wp-block-post-navigation-link-next {
    @apply bg-black text-white px-6 py-3 font-black brutal-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-block;
}

/* WordPress post navigation link label */
.wp-block-post-navigation-link-label {
    @apply text-sm font-bold;
}

/* WordPress post navigation link title */
.wp-block-post-navigation-link-title {
    @apply font-black;
}

/* WordPress post navigation link author */
.wp-block-post-navigation-link-author {
    @apply text-sm text-gray-600 font-bold;
}

/* WordPress post navigation link date */
.wp-block-post-navigation-link-date {
    @apply text-sm text-gray-600 font-bold;
}

/* WordPress post navigation link featured image */
.wp-block-post-navigation-link-featured-image {
    @apply border-2 border-black overflow-hidden;
}

.wp-block-post-navigation-link-featured-image img {
    @apply w-full h-32 object-cover;
}

/* WordPress post navigation link content */
.wp-block-post-navigation-link-content {
    @apply p-4;
}

/* WordPress post navigation link meta */
.wp-block-post-navigation-link-meta {
    @apply text-sm text-gray-600 font-bold;
}

/* WordPress post navigation link title */
.wp-block-post-navigation-link-title {
    @apply font-black;
}

/* WordPress post navigation link author */
.wp-block-post-navigation-link-author {
    @apply text-sm text-gray-600 font-bold;
}

/* WordPress post navigation link date */
.wp-block-post-navigation-link-date {
    @apply text-sm text-gray-600 font-bold;
}

/* WordPress post navigation link featured image */
.wp-block-post-navigation-link-featured-image {
    @apply border-2 border-black overflow-hidden;
}

.wp-block-post-navigation-link-featured-image img {
    @apply w-full h-32 object-cover;
}

/* WordPress post navigation link content */
.wp-block-post-navigation-link-content {
    @apply p-4;
}

/* WordPress post navigation link meta */
.wp-block-post-navigation-link-meta {
    @apply text-sm text-gray-600 font-bold;
}