filip/svelte_flask_template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add tailwind css to the setup

Browse Source
This commit is contained in:
Filip Krumpe 2022-01-12 15:06:44 +01:00
parent d86ac40602
commit eaf6d18bc7
8 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/package.json
View File

@ -12,12 +12,17 @@
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "next", "@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next", "@sveltejs/kit": "next",
"autoprefixer": "^10.4.2",
"cssnano": "^5.0.15",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1", "eslint-plugin-svelte3": "^3.2.1",
"postcss": "^8.4.5",
"prettier": "^2.4.1", "prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0", "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", "type": "module",
"dependencies": { "dependencies": {

19
webapp/postcss.config.cjs Normal file
View File

@ -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

3
webapp/src/app.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

2
webapp/src/app.html
View File

@ -5,7 +5,7 @@
<meta name="description" content="" /> <meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.png" /> <link rel="icon" href="%svelte.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/> <!--<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>-->
%svelte.head% %svelte.head%
</head> </head>
<body> <body>

1
webapp/src/routes/__layout.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import Navbar from "./menu/_Navbar.svelte"; import Navbar from "./menu/_Navbar.svelte";
import Sidebar from "./menu/_Sidebar.svelte"; import Sidebar from "./menu/_Sidebar.svelte";
import "../app.css";
let open = false; let open = false;
</script> </script>

4
webapp/src/routes/index.svelte
View File

@ -4,9 +4,9 @@
export let name = "Test 2"; export let name = "Test 2";
</script> </script>
<main class="w-full h-full"> <div class="w-full h-full">
<h1>Welcome to SvelteKit</h1> <h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<Main name={name} /> <Main name={name} />
</main> </div>

6
webapp/svelte.config.js
View File

@ -1,7 +1,13 @@
import adapter from '@sveltejs/adapter-static'; import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess'
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
preprocess: [
preprocess({
postcss: true,
}),
],
kit: { kit: {
adapter: adapter(), adapter: adapter(),

10
webapp/tailwind.config.js Normal file
View File

@ -0,0 +1,10 @@
const config = {
mode: "jit",
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {},
},
plugins: [],
}
module.exports = config