blog: tailwind works

apps/blog/astro.config.mjs

@@ -18,5 +18,7 @@ export default defineConfig({
       wrap: true
     }
   },
-  integrations: [tailwind()]
+  integrations: [tailwind({
+    config: {}
+  })]
 });

apps/blog/package.json

@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@acme/tailwind-config": "workspace:*",
     "@astrojs/tailwind": "^2.1.3",
     "astro": "^1.6.13",
     "tailwindcss": "^3.0.24"

apps/blog/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@acme/tailwind-config/postcss");

apps/blog/src/layouts/Layout.astro

@@ -19,17 +19,3 @@ const { title } = Astro.props;
 		<slot />
 	</body>
 </html>
-<style is:global>
-	:root {
-		--accent: 124, 58, 237;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background-color: #F6F6F6;
-	}
-	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
-	}
-</style>

apps/blog/src/pages/index.astro

@@ -31,6 +31,9 @@ import Card from '../components/Card.astro';
 				title="Community"
 				body="Come say hi to our amazing Discord community. ❤️"
 			/>
+			<section class="flex bg-gray-200 border-amber-900 rounded-md">
+				Hello world
+			</section>
 		</ul>
 	</main>
 </Layout>

apps/blog/tailwind.config.cjs

@@ -1,4 +1,5 @@
 /** @type {import("tailwindcss").Config} */
 module.exports = {
   presets: [require("@acme/tailwind-config")],
+  content: ["./src/**/*.astro"]
 };

packages/config/tailwind/index.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{ts,tsx}", "./src/_app.tsx"],
+  content: ["./src/**/*.{ts,tsx}", "./src/_app.tsx", "./src/**/*.astro"],
   theme: {
     extend: {},
   },

pnpm-lock.yaml

@@ -94,10 +94,12 @@ importers:
 
   apps/blog:
     specifiers:
+      '@acme/tailwind-config': workspace:*
       '@astrojs/tailwind': ^2.1.3
       astro: ^1.6.13
       tailwindcss: ^3.0.24
     dependencies:
+      '@acme/tailwind-config': link:../../packages/config/tailwind
       '@astrojs/tailwind': 2.1.3_tailwindcss@3.2.4
       astro: 1.6.13
       tailwindcss: 3.2.4
@@ -5527,6 +5529,17 @@ packages:
       find-up: 4.1.0
     dev: false
 
+  /postcss-import/14.1.0:
+    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.1
+    dev: false
+
   /postcss-import/14.1.0_postcss@8.4.14:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -5549,6 +5562,16 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
+    dev: true
+
+  /postcss-js/4.0.0:
+    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      camelcase-css: 2.0.1
+    dev: false
 
   /postcss-js/4.0.0_postcss@8.4.14:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -5568,6 +5591,23 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.19
+    dev: true
+
+  /postcss-load-config/3.1.4:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.6
+      yaml: 1.10.2
+    dev: false
 
   /postcss-load-config/3.1.4_postcss@8.4.14:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -5602,6 +5642,15 @@ packages:
       postcss: 8.4.19
       yaml: 1.10.2
 
+  /postcss-nested/6.0.0:
+    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss-selector-parser: 6.0.10
+    dev: false
+
   /postcss-nested/6.0.0_postcss@8.4.14:
     resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
     engines: {node: '>=12.0'}
@@ -5620,6 +5669,7 @@ packages:
     dependencies:
       postcss: 8.4.19
       postcss-selector-parser: 6.0.10
+    dev: true
 
   /postcss-selector-parser/6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -6457,6 +6507,8 @@ packages:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3
@@ -6473,10 +6525,10 @@ packages:
       object-hash: 3.0.0
       picocolors: 1.0.0
       postcss: 8.4.19
-      postcss-import: 14.1.0_postcss@8.4.19
+      postcss-import: 14.1.0
-      postcss-js: 4.0.0_postcss@8.4.19
+      postcss-js: 4.0.0
-      postcss-load-config: 3.1.4_postcss@8.4.19
+      postcss-load-config: 3.1.4
-      postcss-nested: 6.0.0_postcss@8.4.19
+      postcss-nested: 6.0.0
       postcss-selector-parser: 6.0.10
       postcss-value-parser: 4.2.0
       quick-lru: 5.1.1