Skip to content

Commit d3b4782

Browse files
0xmiki0xmiki
committed
updated the get started page with tailwind v4 guide and added shell.nix file
1 parent 52906bc commit d3b4782

File tree

2 files changed

+48
-77
lines changed

2 files changed

+48
-77
lines changed

‎packages/svelte-ux/src/routes/+page.svelte

Lines changed: 40 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<Code source={`npx sv add tailwindcss`} language="sh" />
3434

3535
<div>Add Svelte UX package</div>
36-
<Code source={`npm install svelte-ux`} language="sh" />
36+
<Code source={`npm install svelte-ux@next`} language="sh" />
3737
{:else if selectedTab === 'manual'}
3838
<div>
3939
Follow the Tailwind <a href="https://tailwindcss.com/docs/guides/sveltekit" target="_blank">
@@ -42,93 +42,56 @@
4242
</div>
4343

4444
<div>Add Svelte UX package</div>
45-
<Code source={`npm install svelte-ux`} language="sh" />
45+
<Code source={`npm install svelte-ux@next`} language="sh" />
4646
{/if}
4747

4848
{#if selectedTab === 'svelte-cli' || selectedTab === 'manual'}
49-
<div>Update <code>tailwind.config.cjs</code></div>
49+
<div>Update <code>app.css</code></div>
5050
<Code
51-
source={`const colors = require('tailwindcss/colors');
52-
const layerstack = require('@layerstack/tailwind/plugin');
53-
54-
module.exports = {
55-
content: [
56-
'./src/**/*.{html,svelte}',
57-
'./node_modules/svelte-ux/**/*.{svelte,js}'
58-
],
59-
60-
// See customization docs: https://svelte-ux.techniq.dev/customization
61-
ux: {
62-
themes: {
63-
light: {
64-
primary: colors['orange']['500'],
65-
'primary-content': 'white',
66-
secondary: colors['blue']['500'],
67-
'surface-100': 'white',
68-
'surface-200': colors['gray']['100'],
69-
'surface-300': colors['gray']['300'],
70-
'surface-content': colors['gray']['900'],
71-
'color-scheme': 'light'
72-
},
73-
dark: {
74-
primary: colors['orange']['500'],
75-
'primary-content': 'white',
76-
secondary: colors['blue']['500'],
77-
'surface-100': colors['zinc']['800'],
78-
'surface-200': colors['zinc']['900'],
79-
'surface-300': colors['zinc']['950'],
80-
'surface-content': colors['zinc']['100'],
81-
'color-scheme': 'dark'
82-
},
83-
},
84-
},
85-
86-
plugins: [
87-
layerstack, // uses hsl() color space by default. To use oklch(), use: layerstack({ colorSpace: 'oklch' }),
88-
]
89-
};`}
90-
language="js"
51+
source={`@import 'tailwindcss';
52+
@import '@layerstack/tailwind/core.css';
53+
@import '@layerstack/tailwind/utils.css';
54+
@import '@layerstack/tailwind/themes/basic.css'; // Note: Theme choice explained below
55+
56+
@source '../../node_modules/svelte-ux/dist';
57+
@source '../../node_modules/@layerchart/dist';
58+
59+
// You can customize your theme as you see fit using CSS variables. Dark mode is targeted using with .dark class on :root/<html>
60+
:root {
61+
--color-primary: var(--color-purple-700);
62+
--color-secondary: var(--color-orange-500);
63+
64+
&.dark {
65+
--color-primary: var(--color-purple-400);
66+
--color-surface-100: var(--color-zinc-900);
67+
--color-surface-200: var(--color-zinc-950);
68+
--color-surface-300: var(--color-black);
69+
}
70+
}
71+
`}
72+
language="css"
9173
/>
9274
{/if}
9375
</div>
9476

95-
<p>A few notes regarding the <code>tailwind.config.cjs</code></p>
96-
97-
<ul>
98-
<li>
99-
<code>{`./node_modules/svelte-ux/**/*.{(svelte, js)}`}</code> adds the library classes via
100-
<a href="https://tailwindcss.com/docs/content-configuration">JIT</a>
101-
</li>
77+
<strong class="block mt-3 mb-1 text-surface-content">Theme setup:</strong>
78+
<ul class="list-disc pl-6 space-y-1 my-1 text-sm text-surface-content">
10279
<li>
103-
<code>ux.themes</code> is used to configure the theme colors. See
104-
<a href="/customization">customization</a> for more details.
80+
The line <code>@import '@layerstack/tailwind/themes/basic.css';</code> in the CSS example
81+
above provides basic light and dark theme support. If you require multiple light/dark
82+
themes, or want to use pre-built themes like Skeleton or Daisy UI (which is what the
83+
Svelte UX <a
84+
href="https://github.com/techniq/svelte-ux/blob/next/packages/svelte-ux/src/routes/app.css"
85+
target="_blank">docs</a
86+
> use), you should replace this line with
87+
<code>@import '@layerstack/tailwind/themes/all.css';</code>.
10588
</li>
10689
<li>
107-
Tailwind plugin injects the theme color variables, sets border, outline, ring, and typograpy
108-
defauls based on the theme, and adds additional utility classes including:
109-
<ul>
110-
<li>
111-
<code>elevation-#</code> for
112-
<a
113-
class="text-primary font-medium"
114-
href="https://www.joshwcomeau.com/css/designing-shadows/"
115-
rel="nofollow">realistic shadows</a
116-
>
117-
using multiple shadow layers, unlike the current Tailwind
118-
<a
119-
class="text-primary font-medium"
120-
href="https://tailwindcss.com/docs/box-shadow"
121-
rel="nofollow">shadows</a
122-
>
123-
which have at most 2 layers.
124-
</li>
125-
<li>
126-
<code>grid-stack</code> to easily stack grid children
127-
</li>
128-
<li>
129-
<code>scrollbar-none</code> to hide the scrollbar
130-
</li>
131-
</ul>
90+
@layerstack/tailwind (the theme system used by Svelte UX) was migrated to be css-only. You
91+
can see the source on the next branch <a
92+
href="https://github.com/techniq/layerstack/tree/next/packages/tailwind/src/lib/css"
93+
target="_blank">here</a
94+
>
13295
</li>
13396
</ul>
13497

‎shell.nix

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{ pkgs ? import <nixpkgs> {} }:
2+
3+
pkgs.mkShell {
4+
buildInputs = with pkgs; [
5+
nodejs
6+
pnpm
7+
];
8+
}

0 commit comments

Comments
 (0)