ML fixes; properly import @tailwind & use @apply; fix ./json import

src/block1/edit.js

@@ -19,7 +19,7 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-import './editor.scss';
+import './editor.css';
 
 /**
  * The edit function describes the structure of your block in the context of the

src/block1/editor.scss → src/block1/editor.css

@@ -4,6 +4,11 @@
  * Replace them with your own styles or remove the file completely.
  */
 
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+
 .wp-block-create-block-block1 {
-	border: 2px dotted #f00;
+	/* border: 2px dotted #f00; */
+    @apply border-2 border-green-300;
 }

src/block1/index.js

@@ -12,14 +12,16 @@ import { registerBlockType } from '@wordpress/blocks';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-import './style.scss';
+// import './style.css';
+// import './style.postcss';
+import './style.css';
 
 /**
  * Internal dependencies
  */
 import Edit from './edit';
 import save from './save';
-import json from './json';
+import json from './block.json';
 
 const { name } = json;
 

src/block1/style.scss → src/block1/style.css

@@ -5,10 +5,10 @@
  * Replace them with your own styles or remove the file completely.
  */
 
-@tailwind components;
-@tailwind utilities;
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
 
 .wp-block-create-block-block1 {
-	background-color: #21759b;
-	color: #fff;
+    @apply bg-purple-800 text-slate-400 border-2 border-green-400 rounded;
 }

src/block1/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-	content: ['./src/block1/*js'],
+	content: ['./src/block1/*js', './src/block1/*css'],
 	theme: {
 		extend: {},
 	},

src/block2/edit.js

@@ -19,7 +19,7 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-import './editor.scss';
+import './editor.css';
 
 /**
  * The edit function describes the structure of your block in the context of the

src/block2/editor.scss → src/block2/editor.css

@@ -4,6 +4,11 @@
  * Replace them with your own styles or remove the file completely.
  */
 
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+
 .wp-block-create-block-block2 {
-	border: 2px dotted #f00;
+	/* border: 2px dotted #f00; */
+	@apply border-2 border-dotted border-[#f00];
 }

src/block2/index.js

@@ -12,14 +12,14 @@ import { registerBlockType } from '@wordpress/blocks';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-import './style.scss';
+import './style.css';
 
 /**
  * Internal dependencies
  */
 import Edit from './edit';
 import save from './save';
-import json from './json';
+import json from './block.json';
 
 const { name } = json;
 

src/block2/style.scss → src/block2/style.css

@@ -5,10 +5,12 @@
  * Replace them with your own styles or remove the file completely.
  */
 
-@tailwind components;
-@tailwind utilities;
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
 
 .wp-block-create-block-block2 {
-	background-color: #1dd85c;
-	color: #fff;
+	/* background-color: #1dd85c;
+	color: #fff; */
+	@apply bg-[#1dd85c] text-[#fff];
 }

src/block2/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-	content: ['./src/block2/*js'],
+	content: ['./src/block1/*js', './src/block1/*css'],
 	theme: {
 		extend: {},
 	},

src/block3/edit.js

@@ -19,7 +19,7 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-import './editor.scss';
+import './editor.css';
 
 /**
  * The edit function describes the structure of your block in the context of the

src/block3/editor.scss → src/block3/editor.css

@@ -4,6 +4,11 @@
  * Replace them with your own styles or remove the file completely.
  */
 
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+
 .wp-block-create-block-block3 {
-	border: 2px dotted #f00;
+	/* border: 2px dotted #f00; */
+	@apply border-2 border-dotted border-[#f00];
 }

src/block3/index.js

@@ -12,14 +12,14 @@ import { registerBlockType } from '@wordpress/blocks';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-import './style.scss';
+import './style.css';
 
 /**
  * Internal dependencies
  */
 import Edit from './edit';
 import save from './save';
-import json from './json';
+import json from './block.json';
 
 const { name } = json;
 

src/block3/style.scss → src/block3/style.css

@@ -5,10 +5,12 @@
  * Replace them with your own styles or remove the file completely.
  */
 
-@tailwind components;
-@tailwind utilities;
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
 
 .wp-block-create-block-block3 {
-	background-color: #df1a5c;
-	color: #fff;
+	/* background-color: #df1a5c;
+	color: #fff; */
+	@apply bg-[#df1a5c] text-white;
 }

src/block3/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-	content: ['./src/block3/*js'],
+	content: ['./src/block1/*js', './src/block1/*css'],
 	theme: {
 		extend: {},
 	},