petal init

assets/css/app.css

@@ -1,4 +1,13 @@
-/* This file is for your main application CSS */
+/* Import tailwind - with postcss-import installed */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* custom styles - put after base imports! */
+@import "./custom-styles.css";
+/* import custom components */
+@import "./components/buttons.css";
+/* default phoenix styles - eventually remove */
 @import "./phoenix.css";
 
 /* Alerts and form errors used by phx.new */

assets/css/components/buttons.css

@@ -0,0 +1,8 @@
+@layer components {
+    .btn-redish {
+        @apply bg-red-300 hover:bg-red-600 text-blue-800 font-bold py-2 px-4 rounded;
+    }
+    .btn-greenish {
+        @apply bg-green-300 hover:bg-green-600 text-blue-800 font-bold py-2 px-4 rounded;
+    }
+}

assets/js/app.js

@@ -1,6 +1,6 @@
 // We import the CSS which is extracted to its own file by esbuild.
 // Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "../css/app.css"
+// import "../css/app.css"
 import Alpine from "alpinejs"
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`

assets/package.json

@@ -10,6 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "alpinejs": "^3.10.2"
+    "alpinejs": "^3.10.2",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
+    "postcss-import": "^14.1.0",
+    "tailwindcss": "^3.0.24"
   }
 }

assets/pnpm-lock.yaml

@@ -1,25 +0,0 @@
-lockfileVersion: 5.4
-
-specifiers:
-  alpinejs: ^3.10.2
-
-dependencies:
-  alpinejs: 3.10.2
-
-packages:
-
-  /@vue/reactivity/3.1.5:
-    resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==}
-    dependencies:
-      '@vue/shared': 3.1.5
-    dev: false
-
-  /@vue/shared/3.1.5:
-    resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
-    dev: false
-
-  /alpinejs/3.10.2:
-    resolution: {integrity: sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==}
-    dependencies:
-      '@vue/reactivity': 3.1.5
-    dev: false

assets/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        "postcss-import": {},
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}

assets/tailwind.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    mode: "jit",
+    purge: [
+        "./js/**/*.js",
+        "../lib/*_web/**/*.*ex"
+    ],
+    theme: {
+        extend: {},
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
+};