From 978de52a091dde088271ebbc3038dbe9d4b022e8 Mon Sep 17 00:00:00 2001 From: Rodolphe Marbot Date: Fri, 3 Jun 2022 14:50:06 +0200 Subject: [PATCH] petal init --- .gitignore | 1 + assets/css/app.css | 11 +++- assets/css/components/buttons.css | 8 +++ assets/css/custom-styles.css | 0 assets/js/app.js | 2 +- assets/package.json | 7 ++- assets/pnpm-lock.yaml | 25 --------- assets/postcss.config.js | 7 +++ assets/tailwind.config.js | 14 +++++ config/dev.exs | 10 +++- .../templates/page/index.html.heex | 53 ++++++++++++++++--- 11 files changed, 103 insertions(+), 35 deletions(-) create mode 100644 assets/css/components/buttons.css create mode 100644 assets/css/custom-styles.css delete mode 100644 assets/pnpm-lock.yaml create mode 100644 assets/postcss.config.js create mode 100644 assets/tailwind.config.js diff --git a/.gitignore b/.gitignore index 21f8dc5..096da7e 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,4 @@ npm-debug.log /assets/node_modules/ /.idea/ reaproche.iml +assets/pnpm-lock.yaml diff --git a/assets/css/app.css b/assets/css/app.css index 19c2e51..7b75252 100644 --- a/assets/css/app.css +++ b/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 */ diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css new file mode 100644 index 0000000..226758e --- /dev/null +++ b/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; + } +} diff --git a/assets/css/custom-styles.css b/assets/css/custom-styles.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/js/app.js b/assets/js/app.js index fe9cb1f..380eb42 100644 --- a/assets/js/app.js +++ b/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` diff --git a/assets/package.json b/assets/package.json index decc8da..35b6b08 100644 --- a/assets/package.json +++ b/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" } } diff --git a/assets/pnpm-lock.yaml b/assets/pnpm-lock.yaml deleted file mode 100644 index a348c94..0000000 --- a/assets/pnpm-lock.yaml +++ /dev/null @@ -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 diff --git a/assets/postcss.config.js b/assets/postcss.config.js new file mode 100644 index 0000000..047c2e3 --- /dev/null +++ b/assets/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + "postcss-import": {}, + tailwindcss: {}, + autoprefixer: {}, + } +} diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js new file mode 100644 index 0000000..bfc2a00 --- /dev/null +++ b/assets/tailwind.config.js @@ -0,0 +1,14 @@ +module.exports = { + mode: "jit", + purge: [ + "./js/**/*.js", + "../lib/*_web/**/*.*ex" + ], + theme: { + extend: {}, + }, + variants: { + extend: {}, + }, + plugins: [], +}; diff --git a/config/dev.exs b/config/dev.exs index 7be6069..8529099 100644 --- a/config/dev.exs +++ b/config/dev.exs @@ -16,7 +16,15 @@ config :reaproche, ReaprocheWeb.Endpoint, secret_key_base: "zETM0Rou9bkIcitBw/xgVMcpO6TIz+vu0rgaj3TtYoba3zS97DklUIQl2nnf1ELf", watchers: [ # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args) - esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]} + esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}, + npx: [ + "tailwindcss", + "--input=css/app.css", + "--output=../priv/static/assets/app.css", + "--postcss", + "--watch", + cd: Path.expand("../assets", __DIR__) + ] ] # ## SSL Support diff --git a/lib/reaproche_web/templates/page/index.html.heex b/lib/reaproche_web/templates/page/index.html.heex index 2d96570..e61f74c 100644 --- a/lib/reaproche_web/templates/page/index.html.heex +++ b/lib/reaproche_web/templates/page/index.html.heex @@ -40,12 +40,53 @@ -
-

Alpine JS Installed

-
- - -


Output:

+
+ +
+

Tailwind CSS with Alpine JS Dropdown

+
+ +
+ +
+ Settings + Support + Sign Out +
+
+ + +
+

Counter with Component Buttons

+
+ +
+ + count: +