Tailwind v4 support #428

SleeplessOne1917 · 2025-02-01T05:25:45Z

Closes #426 and closes #417.

Judging by the linked issues, I'm not the only one interested in using Tailwind v4 with Leptos. I added code to support use on linux musl, though I'm not sure how to test that it's correct. I also haven't figured out how to prevent the generation of a JS config file (which isn't needed in Tailwind v4) when using v4. Because of all of this, I'm opening this PR as a draft.

SleeplessOne1917 · 2025-02-01T05:27:49Z

src/ext/exe.rs

-        target_arch: &str,
-        version: Option<&str>,
-    ) -> Result<String>;
+    fn executable_name(&self, target_os: &str, target_arch: &str, version: &str) -> Result<String>;


Made version a &str instead of an Option<&str> since the only place the function is called, the version is guarunteed to be known. It also doesn't seem like this function will be called in a different place.

SleeplessOne1917 · 2025-02-01T05:29:49Z

src/ext/exe.rs

@@ -331,6 +331,8 @@ impl Command for CommandTailwind {

    /// Tool binary download url for the given OS and platform arch
    fn download_url(&self, target_os: &str, target_arch: &str, version: &str) -> Result<String> {
+        let use_musl = is_linux_musl_env() && version.starts_with("v4");


Not sure if I should put in the effort to make the Tailwind version check more robust. I doubt they'll be coming out with a new major version any time soon.

Eveeifyeve · 2025-02-01T22:38:50Z

I also haven't figured out how to prevent the generation of a JS config file (which isn't needed in Tailwind v4) when using v4.

Here:

cargo-leptos/src/config/tailwind.rs

Lines 14 to 28 in b2136f1

    
           pub fn new(conf: &ProjectConfig) -> Result<Option<Self>> { 
        
               let input_file = if let Some(input_file) = conf.tailwind_input_file.clone() { 
        
                   conf.config_dir.join(input_file) 
        
               } else { 
        
                   if conf.tailwind_config_file.is_some() { 
        
                       bail!("The Cargo.toml `tailwind-input-file` is required when using `tailwind-config-file`]"); 
        
                   } 
        
                   return Ok(None); 
        
               }; 
        
               let config_file = conf.config_dir.join( 
        
                   conf.tailwind_config_file 
        
                       .clone() 
        
                       .unwrap_or_else(|| Utf8PathBuf::from("tailwind.config.js")), 
        
               );

Because of all of this, I'm opening this PR as a draft.

Please mark it as a draft pr and not ready for review just to communicate that this is still work in progress and not ready to review.

benwis · 2025-02-01T23:19:45Z

How are you planning on telling Tailwind to scan .rs files without a tailwind config file?

SleeplessOne1917 · 2025-02-02T01:27:42Z

@Eveeifyeve

Please mark it as a draft pr and not ready for review just to communicate that this is still work in progress and not ready to review.

My apologies. I accidentally opened it as ready for review and was unable to find out how to revert it to a draft PR after the fact.

@benwis

How are you planning on telling Tailwind to scan .rs files without a tailwind config file?

According to the Tailwind CSS docs, almost every type of file gets scanned:

Tailwind will scan every file in your project for class names, except in the following cases:

Files that are in your .gitignore file

Binary files like images, videos, or zip files

CSS files

Common package manager lock files

If you need to scan any files that Tailwind is ignoring by default, you can explicitly register those sources.

If the rust files still get ignored, we can still add sources explicity wiith @source in the CSS file.

benwis · 2025-02-02T01:38:28Z

@Eveeifyeve

Please mark it as a draft pr and not ready for review just to communicate that this is still work in progress and not ready to review.

My apologies. I accidentally opened it as ready for review and was unable to find out how to revert it to a draft PR after the fact.

@benwis

How are you planning on telling Tailwind to scan .rs files without a tailwind config file?

According to the Tailwind CSS docs, almost every type of file gets scanned:

Tailwind will scan every file in your project for class names, except in the following cases:

Files that are in your .gitignore file

Binary files like images, videos, or zip files

CSS files

Common package manager lock files

If you need to scan any files that Tailwind is ignoring by default, you can explicitly register those sources.

If the rust files still get ignored, we can still add sources explicity wiith @source in the CSS file.

Good to know, I have not read their new docs

SleeplessOne1917 · 2025-02-02T01:55:16Z

From what I can tell, the JS config file is autogenerated in src/compile/tailwind.rs as opposed to src/config/tailwind.rs as linked in a previous comment. The code in src/config/tailwind.rs does generate a TailwindConfig instance, but the only info TailwindConfig::new has to generate that is a &ProjectConfig, which doesn't contain any info directly about which tailwind version is being used. The current version is used in src/ext/exe.rs, although I couldn't find a clean way of making that accessible to code in other modules.

I could use the environment variable to tell what the version is, although that will break if the env var isn't specified and the user is using the default version. Alternatively, since the &ProjectConfig being passed to TailwindConfig::new has the path of the input tailwindcss file, I could read the first line of the file to see if it equals @import "tailwindcss";. Neither of these solutions are ideal, though.

Edit: Another idea occurred to me. Users could specify which version of Tailwind they want to use in the Cargo.toml compilation/site parameters. This could take precedence over the default version hardcoded in this codebase, but be overrideable the environment variable.

Yet another approach could be scanning a package.json file, if present, for the version it uses.

SleeplessOne1917 added 3 commits January 31, 2025 14:41

Make tailwind v4 default and add support for musl for tailwind

f3bb93b

Fix false assumption from last commit

afdff7c

Use tailwind v4 import

1e3c899

SleeplessOne1917 commented Feb 1, 2025

View reviewed changes

benwis marked this pull request as draft February 1, 2025 23:20

Use latest tailwindcss

d3baddb

SleeplessOne1917 mentioned this pull request Feb 3, 2025

Use libraries instead of locally installed binaries for Cargo Generate and Wasm Opt #429

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind v4 support #428

Tailwind v4 support #428

SleeplessOne1917 commented Feb 1, 2025 •

edited

Loading

SleeplessOne1917 Feb 1, 2025

SleeplessOne1917 Feb 1, 2025

Eveeifyeve commented Feb 1, 2025

benwis commented Feb 1, 2025

SleeplessOne1917 commented Feb 2, 2025

benwis commented Feb 2, 2025

SleeplessOne1917 commented Feb 2, 2025 •

edited

Loading

Tailwind v4 support #428

Are you sure you want to change the base?

Tailwind v4 support #428

Conversation

SleeplessOne1917 commented Feb 1, 2025 • edited Loading

SleeplessOne1917 Feb 1, 2025

Choose a reason for hiding this comment

SleeplessOne1917 Feb 1, 2025

Choose a reason for hiding this comment

Eveeifyeve commented Feb 1, 2025

benwis commented Feb 1, 2025

SleeplessOne1917 commented Feb 2, 2025

benwis commented Feb 2, 2025

SleeplessOne1917 commented Feb 2, 2025 • edited Loading

SleeplessOne1917 commented Feb 1, 2025 •

edited

Loading

SleeplessOne1917 commented Feb 2, 2025 •

edited

Loading