You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-8Lines changed: 13 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,18 +5,23 @@
5
5
TypeScript utility package that generates a utilities.css file on demand with shorthand class names for common CSS properties. By using intuitive notations like d-f (display: flex) as values for className attributes inside your jsx, this package streamlines your styling process, making your main CSS structure cleaner, reusable and more maintainable while ensuring consistent, efficient application of styles across your project.
6
6
7
7
## Installation & Setup (Auto)
8
-
First, run create-css-utilities auto executable, installing css-utilities-generator, dependencies and configuration files into your project:
8
+
First, run css-utils init CLI command, Initializes a css-utilities-creator configuration at your project root ([cuconfig.json](#configuration-file-defaults)) with properties as `writeTo` (generated css directory/fileName) `readFrom` (useful to avoid watching changes on unnecessary directories) and utils excecutable script:
9
9
```bash
10
10
# Automatic installation executable:
11
-
> npx create-css-utilities
11
+
> npx css-utils init
12
12
```
13
+
A css file with on demand generated class utilities from jsx/tsx className attributes, is generated at `writeTo` path, default: ./styles/utilities.css Imported properly at main root project file:
14
+
```typescript
15
+
import"@/styles/index.scss"
16
+
```
17
+
> app/layout.tsx
13
18
14
-
Run the following command to start generatic css utilities:
19
+
Run the following command to start generating css utilities on save:
15
20
```bash
16
21
# Run the following command (generates css utilities on save):
17
22
> npm run utils
18
23
```
19
-
Now import the generated css file to the project root file, start watching for changes in your root directory and automatically regenerate the CSS utilities.
24
+
Now the generated css file is imported to the project root file, start watching for changes in your root directory and automatically regenerate the CSS utilities.
0 commit comments