1- The ` tailwindcss-to-rust ` CLI tool generates Rust code that allows you to
2- refer to Tailwind classes from your Rust code. This means that any attempt to
3- use a nonexistent class will lead to a compile-time error, and you can use
4- code completion to list available classes.
1+ The ` tailwindcss-to-rust ` CLI tool generates Rust code that allows you to refer to Tailwind classes
2+ from your Rust code. This means that any attempt to use a nonexistent class will lead to a
3+ compile-time error, and you can use code completion to list available classes.
54
65** This tool has been tested with version 3.2.x of Tailwind.**
76
8- The generated code allows you to use Tailwind CSS classes in your Rust
9- frontend code with compile-time checking of names and code completion for
10- class names. These classes are grouped together based on the heading in the
11- Tailwind docs. It also generates code for the full list of Tailwind modifiers
12- like ` lg ` , ` hover ` , etc.
7+ The generated code allows you to use Tailwind CSS classes in your Rust frontend code with
8+ compile-time checking of names and code completion for class names. These classes are grouped
9+ together based on the heading in the Tailwind docs. It also generates code for the full list of
10+ Tailwind modifiers like ` lg ` , ` hover ` , etc.
1311
14- [ ** Check out the tailwindcss-to-rust-macros
15- crate** ] ( https://crates.io/crates/tailwindcss-to-rust-macros ) for the most
16- ergonomic way to use the code generated by this tool.
12+ [ ** Check out the tailwindcss-to-rust-macros crate** ] ( https://crates.io/crates/tailwindcss-to-rust-macros )
13+ for the most ergonomic way to use the code generated by this tool.
1714
1815So instead of this:
1916
@@ -27,8 +24,8 @@ You can write this:
2724let class = C![C::spc::pt_4 C::pb_2 C::typ::text_white];
2825```
2926
30- Note that the typo in the first example, ** "text-whit"** (missing the "e")
31- would become a compile-time error if you wrote ` C::typ::text_whit ` .
27+ Note that the typo in the first example, ** "text-whit"** (missing the "e") would become a
28+ compile-time error if you wrote ` C::typ::text_whit ` .
3229
3330Here's a quick start recipe:
3431
@@ -38,23 +35,20 @@ Here's a quick start recipe:
3835 cargo install tailwindcss-to-rust
3936 ```
4037
41- 2 . [ Install the ` tailwindcss ` CLI
42- tool] ( https://tailwindcss.com/docs/installation ) . You can install it with
43- ` npm ` or ` npx ` , or you can [ download a standalone binary from the
44- tailwindcss repo] ( https://github.com/tailwindlabs/tailwindcss/releases ) .
38+ 2 . [ Install the ` tailwindcss ` CLI tool] ( https://tailwindcss.com/docs/installation ) . You can install
39+ it with ` npm ` or ` npx ` , or you can
40+ [ download a standalone binary from the tailwindcss repo] ( https://github.com/tailwindlabs/tailwindcss/releases ) .
4541
46423 . Create a ` tailwind.config.js ` file with the tool by running:
4743
4844 ``` sh
4945 tailwindcss init
5046 ```
5147
52- 4 . Edit this file however you like to add plugins or customize the generated
53- CSS.
48+ 4 . Edit this file however you like to add plugins or customize the generated CSS.
5449
55- 5 . Create a CSS input file for Tailwind. For the purposes of this example we
56- will assume that it's located at ` css/tailwind.css ` . The standard file
57- looks like this:
50+ 5 . Create a CSS input file for Tailwind. For the purposes of this example we will assume that it's
51+ located at ` css/tailwind.css ` . The standard file looks like this:
5852
5953 ``` css
6054 @tailwind base;
@@ -72,12 +66,10 @@ Here's a quick start recipe:
7266 --rustfmt
7367 ```
7468
75- ** The ` tailwindcss ` executable must be in your ` PATH ` when you run
76- ` tailwindcss-to-rust ` or you must provide the path to the executable in the
77- ` --tailwindcss ` argument.**
69+ ** The ` tailwindcss ` executable must be in your ` PATH ` when you run ` tailwindcss-to-rust ` or you
70+ must provide the path to the executable in the ` --tailwindcss ` argument.**
7871
79- 7 . Edit your ` tailwind.config.js ` file to look in your Rust files for Tailwind
80- class names:
72+ 7 . Edit your ` tailwind.config.js ` file to look in your Rust files for Tailwind class names:
8173
8274 ``` js
8375 /** @type {import('tailwindcss').Config} */
@@ -91,10 +83,7 @@ Here's a quick start recipe:
9183 if (rs .startsWith (" two_" )) {
9284 rs = rs .replace (" two_" , " 2" );
9385 }
94- return rs
95- .replaceAll (" _of_" , " /" )
96- .replaceAll (" _p_" , " ." )
97- .replaceAll (" _" , " -" );
86+ return rs .replaceAll (" _of_" , " /" ).replaceAll (" _p_" , " ." ).replaceAll (" _" , " -" );
9887 };
9988
10089 let one_class_re = " \\ bC::[a-z0-9_]+::([a-z0-9_]+)\\ b" ;
@@ -129,21 +118,15 @@ Here's a quick start recipe:
129118 };
130119 ```
131120
132- ** Note that you may need to customize the regexes in the
133- ` extract ` function to match your templating system!** The regexes in this
134- example will match the syntax you'd use with the
135- [ tailwindcss-to-rust-macros] ( https://crates.io/crates/tailwindcss-to-rust-macros )
136- crate.
121+ ** Note that you may need to customize the regexes in the ` extract ` function to match your
122+ templating system!** The regexes in this example will match the syntax you'd use with the
123+ [ tailwindcss-to-rust-macros] ( https://crates.io/crates/tailwindcss-to-rust-macros ) crate.
137124
138- For example, if you're using [ askama] ( https://crates.io/crates/askama )
139- without the macros then you will need to match something like this:
125+ For example, if you're using [ askama] ( https://crates.io/crates/askama ) without the macros then
126+ you will need to match something like this:
140127
141128 ``` html
142- <div
143- class =" {{ M::hover }}:{{ C::bg::bg_rose_500 }} {{ C::bg::bg_rose_800 }}"
144- >
145- ...
146- </div >
129+ <div class =" {{ M::hover }}:{{ C::bg::bg_rose_500 }} {{ C::bg::bg_rose_800 }}" >...</div >
147130 ```
148131
149132 The regexes for that would look something like this:
@@ -169,9 +152,9 @@ Here's a quick start recipe:
169152 < link data-trunk rel=" css" href=" /css/tailwind_compiled.css" />
170153 ` ` `
171154
172- In this example, I' m using [Trunk](https://trunkrs.dev/), which is a great
173- alternative to webpack for projects that want to use Rust -> WASM without any
174- node.js tooling. My `Trunk.toml` looks like this:
155+ In this example, I' m using [Trunk](https://trunkrs.dev/), which is a great alternative to webpack
156+ for projects that want to use Rust -> WASM without any node.js tooling. My `Trunk.toml` looks like
157+ this:
175158
176159```toml
177160[build]
@@ -192,26 +175,23 @@ When I run `trunk` I have to make sure to ignore that generated file:
192175trunk --ignore ./css/tailwind_compiled.css ...
193176```
194177
195- The generated names consist of all the class names present in the CSS file,
196- except names that start with a dash (` - ` ), names that contain pseudo-elements,
197- like ` .placeholder-opacity-100::-moz-placeholder ` , and names that contain
198- modifiers like ` lg ` or ` hover ` . Names are transformed into Rust identifiers
199- using the following algorithm:
178+ The generated names consist of all the class names present in the CSS file, except names that start
179+ with a dash (` - ` ), names that contain pseudo-elements, like
180+ ` .placeholder-opacity-100::-moz-placeholder ` , and names that contain modifiers like ` lg ` or ` hover ` .
181+ Names are transformed into Rust identifiers using the following algorithm:
200182
201183- All backslash escapes are removed entirely, for example in ` .inset-0\.5 ` .
202184- All dashes (` - ` ) become underscores (` _ ` ).
203185- All periods (` . ` ) become ` _p_ ` , so ` .inset-2\.5 ` becomes ` inset_2_p_5 ` .
204- - All forward slashes (` / ` ) become ` _of_ ` , so ` .inset-2\/4 ` becomes
205- ` inset_2_of_4 ` .
206- - If a name _ starts_ with a ` 2 ` , as in ` 2xl ` , it becomes ` two_ ` , so the ` 2xl `
207- modifier becomes ` two_xl ` .
186+ - All forward slashes (` / ` ) become ` _of_ ` , so ` .inset-2\/4 ` becomes ` inset_2_of_4 ` .
187+ - If a name _ starts_ with a ` 2 ` , as in ` 2xl ` , it becomes ` two_ ` , so the ` 2xl ` modifier becomes
188+ ` two_xl ` .
208189- The name ` static ` becomes ` static_ ` .
209190
210- The generated code provides two modules containing all of the relevant
211- strings.
191+ The generated code provides two modules containing all of the relevant strings.
212192
213- The ` C ` module contains a number of submodules, one for each group of classes
214- as documented in the TailwindCSS docs. The groups are as follows:
193+ The ` C ` module contains a number of submodules, one for each group of classes as documented in the
194+ TailwindCSS docs. The groups are as follows:
215195
216196``` rust,ignore
217197pub(crate) mod C {
@@ -262,20 +242,19 @@ pub(crate) mod C {
262242}
263243```
264244
265- In your code, you can refer to classes with ` C::typ::text_lg ` or
266- ` C::lay::flex ` . If you have any custom classes, these will end in an "unknown"
267- group available from ` C::unk ` . Adding a way to put these custom classes in
268- other groups is a todo item.
245+ In your code, you can refer to classes with ` C::typ::text_lg ` or ` C::lay::flex ` . If you have any
246+ custom classes, these will end in an "unknown" group available from ` C::unk ` . Adding a way to put
247+ these custom classes in other groups is a todo item.
269248
270- The modifiers have their own module, ` M ` , which contains one field per
271- modifier, so it's used as ` M::lg ` or ` M::hover ` . A few modifiers which are
272- parameterizable are not included, like ` aria-* ` , ` data-* ` , etc.
249+ The modifiers have their own module, ` M ` , which contains one field per modifier, so it's used as
250+ ` M::lg ` or ` M::hover ` . A few modifiers which are parameterizable are not included, like ` aria-* ` ,
251+ ` data-* ` , etc.
273252
274- The best way to understand the generated modules is to open the generated code
275- file in your editor and look at it.
253+ The best way to understand the generated modules is to open the generated code file in your editor
254+ and look at it.
276255
277- Then you can import these consts in your code and use them to refer to
278- Tailwind CSS class names with compile time checking:
256+ Then you can import these consts in your code and use them to refer to Tailwind CSS class names with
257+ compile time checking:
279258
280259``` rust,ignore
281260element.set_class(C::lay::aspect_auto);
0 commit comments