TailwindCSS Integration

[lukezsmith]

Has anyone managed to integrate TailwindCSS into reactivated? If so, how?

I'm really struggling with Linaria and would love to use Tailwind.

I tried but ultimately couldn't get it working due due to the dynamic creation of the stylesheets which means the tailwind directives aren't included. I did manage to get it working by including a cdn script with the tailwind source in the header tag within Layout.tsx but I don't really want to do this.

[silviogutierrez]

I actually use TailwindCSS in production now, and plan to add built-in support to reactivated. Here's what I did.

1. Install https://www.npmjs.com/package/patch-package
2. Install tailwind
3. Use the patch below.
4. Create client/input.css as tailwind would normally require.
5. In client/index.tsx add import "@reactivated/tailwind.css" at the very top.

diff --git a/node_modules/reactivated/dist/build.client.mjs b/node_modules/reactivated/dist/build.client.mjs
index f5476c7..341453e 100755
--- a/node_modules/reactivated/dist/build.client.mjs
+++ b/node_modules/reactivated/dist/build.client.mjs
@@ -12,6 +12,13 @@ const env = {
     BUILD_VERSION: process.env.BUILD_VERSION,
     TAG_VERSION: process.env.TAG_VERSION,
 };
+
+import {execSync, exec} from "child_process";
+
+if (production) {
+  execSync("npx tailwind -i client/input.css -o ./node_modules/_reactivated/tailwind.css", {stdio: "ignore"})
+}
+
 esbuild
     .context({
     entryPoints,
@@ -26,7 +33,7 @@ esbuild
     sourcemap: true,
     target: "es2018",
     preserveSymlinks: true,
-    external: ["moment", "@client/generated/images"],
+    external: ["moment", "@reactivated/images"],
     define: {
         // You need both. The one from the stringified JSON is not picked
         // up during the build process.
@@ -54,11 +61,11 @@ esbuild
         // Instead of set it manually instead of relying on minification
         // settings.
         vanillaExtractPlugin({ identifiers }),
-        linaria({ sourceMap: true, esbuildOptions: { sourcemap: "inline" } }),
     ],
 })
     .then(async (context) => {
     if (production === false) {
+        exec("npx tailwind -i client/input.css -o ./node_modules/_reactivated/tailwind.css --watch");
         context.watch();
     }
     else {
diff --git a/node_modules/reactivated/dist/build.renderer.mjs b/node_modules/reactivated/dist/build.renderer.mjs
index 8173326..59832cb 100755
--- a/node_modules/reactivated/dist/build.renderer.mjs
+++ b/node_modules/reactivated/dist/build.renderer.mjs
@@ -48,7 +48,6 @@ esbuild
         // Instead of set it manually instead of relying on minification
         // settings.
         vanillaExtractPlugin({ identifiers }),
-        linaria({ sourceMap: true }),
         {
             name: "restartServer",
             setup: (build) => {

It should work both locally and when you deploy.

[lukezsmith]

Thanks so much for this, Silvio! Worked a charm.
Now for the painstaking process of migrating all of my styles...

[silviogutierrez]

Glad it worked. I've also given up on, see #139 , so it will be removed from Reactivated soon.

However, Vanilla Extract will continue to work. So you should be able to migrate your styles to vanilla-extract pretty easily and use Tailwind for new stuff.

[silviogutierrez]

Better approach shown here: #382