diff --git a/package.json b/package.json index 8af6c34..38fed24 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,14 @@ "prettier-plugin-svelte": "^2.4.0", "svelte": "^3.44.0", "svelte-check": "^2.2.6", - "svelte-preprocess": "^4.9.4", + "svelte-preprocess": "^4.9.8", "tslib": "^2.3.1", - "typescript": "^4.4.3" + "typescript": "^4.4.3", + "postcss": "^8.3.9", + "postcss-load-config": "^3.1.0", + "autoprefixer": "^10.3.7", + "cssnano": "^5.0.8", + "tailwindcss": "^3.0.0" }, "type": "module" } diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..11da48c --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,21 @@ +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: [ + //Some plugins, like tailwindcss/nesting, need to run before Tailwind, + tailwindcss(), + //But others, like autoprefixer, need to run after, + autoprefixer(), + !dev && + cssnano({ + preset: "default", + }), + ], +}; + +module.exports = config; diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..1a7b7cf --- /dev/null +++ b/src/app.css @@ -0,0 +1,4 @@ +/* Write your global styles here, in PostCSS syntax */ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte new file mode 100644 index 0000000..881d2ba --- /dev/null +++ b/src/routes/__layout.svelte @@ -0,0 +1,5 @@ + + + diff --git a/svelte.config.js b/svelte.config.js index 3c395e3..0cafdd5 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -5,7 +5,11 @@ import preprocess from "svelte-preprocess"; const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors - preprocess: preprocess(), + preprocess: [ + preprocess({ + postcss: true, + }), + ], kit: { adapter: adapter(), diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..ec34afe --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,11 @@ +const config = { + content: ["./src/**/*.{html,js,svelte,ts}"], + + theme: { + extend: {}, + }, + + plugins: [], +}; + +module.exports = config;