Fix CSS classnames

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '8fd717a59276874d7127b38319ea255f');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '563e7517e9360406fa4bff7cf1d8dc9f');

src/components/Event.js

@@ -26,6 +26,8 @@ const baseButtonStyles = [
 ];
 
 const baseButtonLinkStyles = [
+	'bg-transparent',
+	'outline-none',
 	'text-blue-700',
 	'hover:text-black',
 	'focus:text-black',
@@ -84,11 +86,12 @@ export default function Event( {
 				className
 			) }
 		>
-			<div>
+			<div className={ cx( 'event__single--innerWrapper' ) }>
 				{ image ? (
 					<img
 						src={ image }
 						className={ cx(
+							'event__single--image',
 							'block',
 							'h-32',
 							'flex-none',
@@ -105,10 +108,11 @@ export default function Event( {
 				) : null }
 				<div
 					className={ cx(
+						'event__single--detailsWrapper',
 						'border-r',
 						'border-b',
 						'border-l',
-						'border-grey-light',
+						'border-gray-200',
 						'bg-white',
 						'rounded-b',
 						'py-4',
@@ -146,7 +150,7 @@ export default function Event( {
 									className={ cx(
 										'event__details--dateDay',
 										'text-xl',
-										'text-grey-800',
+										'text-gray-800',
 										'my-0',
 										'font-sans',
 										'whitespace-no-wrap'
@@ -205,7 +209,7 @@ export default function Event( {
 										className={ cx(
 											'event__details--date',
 											'font-sans',
-											'text-grey-dark',
+											'text-black',
 											'text-xs',
 											'font-medium',
 											'm-0'
@@ -227,7 +231,7 @@ export default function Event( {
 											<p
 												className={ cx(
 													'font-sans',
-													'text-grey-dark',
+													'text-black',
 													'text-xs',
 													'm-0',
 													'truncate'
@@ -241,7 +245,7 @@ export default function Event( {
 												<p
 													className={ cx(
 														'font-sans',
-														'text-grey-dark',
+														'text-black',
 														'text-xs',
 														'm-0',
 														'truncate'
@@ -257,7 +261,7 @@ export default function Event( {
 									<p
 										className={ cx(
 											'text-sm',
-											'text-grey-dark',
+											'text-black',
 											'flex',
 											'items-center',
 											'font-sans',

src/components/EventList.js

@@ -14,7 +14,14 @@ export default function EventList( { events, attributes } ) {
 	} = attributes;
 
 	return (
-		<div className={ cx( 'flex', 'flex-wrap', 'justify-center' ) }>
+		<div
+			className={ cx(
+				'event__list',
+				'flex',
+				'flex-wrap',
+				'justify-center'
+			) }
+		>
 			{ events?.length > 0 ? (
 				events.map( ( event ) => (
 					<Event
@@ -37,7 +44,13 @@ export default function EventList( { events, attributes } ) {
 					/>
 				) )
 			) : (
-				<p className={ cx( 'text-base', 'text-orange-eventbrite' ) }>
+				<p
+					className={ cx(
+						'event__list--noEventsText',
+						'text-base',
+						'text-orange-eventbrite'
+					) }
+				>
 					{ noEventsText }
 				</p>
 			) }

tailwind.config.js

@@ -1,9 +1,6 @@
 module.exports = {
-    important: true,
-    purge: [
-    './src/**/*.js',
-    './src/**/*.jsx',
-  ],
+	important: true,
+	purge: [ './src/**/*.js', './src/**/*.jsx' ],
 	theme: {
 		extend: {
 			colors: {
@@ -16,4 +13,7 @@ module.exports = {
 			},
 		},
 	},
+	variants: {
+		textColor: [ 'responsive', 'hover', 'focus', 'active' ],
+	},
 };