Update tailwindcss to v2 in tailwindcss recipe

recipes/tailwind/index.ts

@@ -16,7 +16,9 @@ export default RecipeBuilder()
     explanation: `Tailwind CSS requires a couple of dependencies to get up and running.
 We'll install the Tailwind library itself, as well as PostCSS for removing unused styles from our production bundles.`,
     packages: [
-      {name: "tailwindcss", version: "1"},
+      {name: "tailwindcss", version: "latest", isDevDep: true},
+      {name: "postcss", version: "latest", isDevDep: true},
+      {name: "postcss-flexbugs-fixes", version: "latest", isDevDep: true},
       {name: "postcss-preset-env", version: "latest", isDevDep: true},
     ],
   })
@@ -30,21 +32,13 @@ These config files can be extended for additional customization, but for now we'
     templatePath: join(__dirname, "templates", "config"),
     templateValues: {},
   })
-  .addNewFilesStep({
-    stepId: "addStyles",
-    stepName: "Add base Tailwind CSS styles",
-    explanation: `Next, we need to actually create some stylesheets! These stylesheets can either be modified to include global styles for your app, or you can stick to just using classnames in your components.`,
-    targetDirectory: "./app",
-    templatePath: join(__dirname, "templates", "styles"),
-    templateValues: {},
-  })
   .addTransformFilesStep({
     stepId: "importStyles",
     stepName: "Import stylesheets",
     explanation: `Finaly, we can import the stylesheets we just created into our application. For now we'll put them in document.tsx, but if you'd like to only style a part of your app with tailwind you could import the styles lower down in your component tree.`,
     singleFileSearch: paths.app(),
     transform(program: Collection<j.Program>) {
-      const stylesImport = j.importDeclaration([], j.literal("app/styles/index.css"))
+      const stylesImport = j.importDeclaration([], j.literal("tailwindcss/tailwind.css"))
       return addImport(program, stylesImport)
     },
   })

recipes/tailwind/templates/config/postcss.config.js

@@ -1,3 +1,15 @@
 module.exports = {
-  plugins: ["tailwindcss", "postcss-preset-env"],
+  plugins: {
+    tailwindcss: {},
+    "postcss-flexbugs-fixes": {},
+    "postcss-preset-env": {
+      autoprefixer: {
+        flexbox: "no-2009",
+      },
+      stage: 3,
+      features: {
+        "custom-properties": false,
+      },
+    },
+  },
 }

recipes/tailwind/templates/config/tailwind.config.js

@@ -1,7 +1,11 @@
 module.exports = {
-  future: "all",
   purge: ["{app,pages}/**/*.{js,jsx,ts,tsx}"],
-  theme: {},
-  variants: {},
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
   plugins: [],
 }

recipes/tailwind/templates/styles/styles/button.css

@@ -1,3 +0,0 @@
-.btn-blue {
-  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
-}

recipes/tailwind/templates/styles/styles/index.css

@@ -1,23 +0,0 @@
-@import "./button.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.hero {
-  width: 100%;
-  color: #333;
-}
-
-.title {
-  margin: 0;
-  width: 100%;
-  padding-top: 80px;
-  line-height: 1.15;
-  font-size: 48px;
-}
-
-.title,
-.description {
-  text-align: center;
-}