Mirrors/leptos
2
0
Fork 0
mirror of https://github.com/leptos-rs/leptos synced 2024-11-10 06:44:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: build CSS with trunk (#1016)

Browse source 
This configures a hook to run the tailwindcss CLI when a build is triggered or retriggered via Trunk watch. It eliminates the need to run the tailwindcss manually.
This commit is contained in:
agilarity 2023-05-08 08:36:07 -04:00 committed by GitHub
parent 1617e31d69
commit 50b48fb272
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/tailwind_csr_trunk/README.md
View file

@ -5,7 +5,7 @@ This is a template demonstrating how to integrate [TailwindCSS](https://tailwind
Install Tailwind and build the CSS: Install Tailwind and build the CSS:
`npx tailwindcss -i ./input.css -o ./style/output.css --watch` `Trunk.toml` is configured to build the CSS automatically.
Install trunk to client side render this bundle. Install trunk to client side render this bundle.

4
examples/tailwind_csr_trunk/Trunk.toml Normal file
View file

@ -0,0 +1,4 @@
[[hooks]]
stage = "build"
command = "sh"
command_arguments = ["-c", "npx tailwindcss -i input.css -o style/output.css"]

11
examples/tailwind_csr_trunk/style/output.css
View file

@ -1,5 +1,5 @@
/* /*
! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/ */
/* /*
@ -31,6 +31,7 @@
3. Use a more readable tab size. 3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default. 4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default. 5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/ */
html { html {
@ -47,6 +48,8 @@ html {
/* 4 */ /* 4 */
font-feature-settings: normal; font-feature-settings: normal;
/* 5 */ /* 5 */
font-variation-settings: normal;
/* 6 */
} }
/* /*
@ -433,6 +436,9 @@ video {
--tw-pan-y: ; --tw-pan-y: ;
--tw-pinch-zoom: ; --tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity; --tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ; --tw-ordinal: ;
--tw-slashed-zero: ; --tw-slashed-zero: ;
--tw-numeric-figure: ; --tw-numeric-figure: ;
@ -480,6 +486,9 @@ video {
--tw-pan-y: ; --tw-pan-y: ;
--tw-pinch-zoom: ; --tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity; --tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ; --tw-ordinal: ;
--tw-slashed-zero: ; --tw-slashed-zero: ;
--tw-numeric-figure: ; --tw-numeric-figure: ;