diff --git a/webapp/package.json b/webapp/package.json index 18fac0f..4e4653d 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -12,12 +12,17 @@ "devDependencies": { "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "next", + "autoprefixer": "^10.4.2", + "cssnano": "^5.0.15", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", + "postcss": "^8.4.5", "prettier": "^2.4.1", "prettier-plugin-svelte": "^2.4.0", - "svelte": "^3.44.0" + "svelte": "^3.44.0", + "svelte-preprocess": "^4.10.1", + "tailwindcss": "^3.0.13" }, "type": "module", "dependencies": { diff --git a/webapp/postcss.config.cjs b/webapp/postcss.config.cjs new file mode 100644 index 0000000..2077a6c --- /dev/null +++ b/webapp/postcss.config.cjs @@ -0,0 +1,19 @@ +const tailwindcss = require("tailwindcss") +const autoprefixer = require("autoprefixer") +const cssnano = require("cssnano") + +const mode = process.env.NODE_ENV +const dev = mode === "development" + +const config = { + plugins: [ + tailwindcss(), + autoprefixer(), + !dev && + cssnano({ + preset: "default", + }) + ] +} + +module.exports = config \ No newline at end of file diff --git a/webapp/src/app.css b/webapp/src/app.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/webapp/src/app.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/webapp/src/app.html b/webapp/src/app.html index 440474b..bf1431e 100644 --- a/webapp/src/app.html +++ b/webapp/src/app.html @@ -5,7 +5,7 @@ - + %svelte.head% diff --git a/webapp/src/routes/__layout.svelte b/webapp/src/routes/__layout.svelte index 22809ff..328e435 100644 --- a/webapp/src/routes/__layout.svelte +++ b/webapp/src/routes/__layout.svelte @@ -1,6 +1,7 @@ diff --git a/webapp/src/routes/index.svelte b/webapp/src/routes/index.svelte index 53af766..f868b6a 100644 --- a/webapp/src/routes/index.svelte +++ b/webapp/src/routes/index.svelte @@ -4,9 +4,9 @@ export let name = "Test 2"; -
+

Welcome to SvelteKit

Visit kit.svelte.dev to read the documentation

-
\ No newline at end of file +
\ No newline at end of file diff --git a/webapp/svelte.config.js b/webapp/svelte.config.js index 7687c3a..5805fed 100644 --- a/webapp/svelte.config.js +++ b/webapp/svelte.config.js @@ -1,7 +1,13 @@ import adapter from '@sveltejs/adapter-static'; +import preprocess from 'svelte-preprocess' /** @type {import('@sveltejs/kit').Config} */ const config = { + preprocess: [ + preprocess({ + postcss: true, + }), + ], kit: { adapter: adapter(), diff --git a/webapp/tailwind.config.js b/webapp/tailwind.config.js new file mode 100644 index 0000000..e4f4993 --- /dev/null +++ b/webapp/tailwind.config.js @@ -0,0 +1,10 @@ +const config = { + mode: "jit", + content: ["./src/**/*.{html,js,svelte,ts}"], + theme: { + extend: {}, + }, + plugins: [], +} + +module.exports = config \ No newline at end of file