Twigwind Build System

In the previous sections, we covered the installation and basic usage of Twigwind in Runtime. Now, let's explore the build system.

Why Use the Build System?

While the runtime version of Twigwind is great for quick prototyping and development, using the build system offers several advantages:

Performance: The build system generates a static CSS file that can be served directly to users, reducing load times and improving performance.

Customization: You can customize the generated CSS by configuring which utilities to include, allowing for a smaller file size.

Production Ready: The build system is designed for production environments, ensuring that your styles are optimized and ready for deployment.

Setting Up the Build System

To set up the Twigwind build system, follow these steps:

Install Node.js: Ensure you have Node.js installed on your machine. You can download it from nodejs.org.

Create a New Project: Set up a new directory for your project and navigate into it:
```
mkdir my-twigwind-project
cd my-twigwind-project
```
Initialize npm: Run the following command to create a package
```
npm init -y
```
Install Twigwind: Install Twigwind as a development dependency:
```
npm install -g twigwind
```

Now we have installed Twigwind, we can start using it in our project.

To use it make some html files and include the generated CSS file:

<link rel="stylesheet" href="dist/your_current_file_name.css">

then run:

twigwind build

This will generate the CSS file in the dist folder.

Note: Make sure to include the generated CSS file in your HTML files for the styles to take effect and remove any unused styles.

🎉 You're all set! You can now use Twigwind in your project with the build system.
You can modify and extend your build process as needed by editing build.cjs.

Example Usage

Here's a simple example of how to use Twigwind in your project:

Initialize npm: Run npm init -y to create a package.json file.

 mkdir my-twigwind-project
cd my-twigwind-project
npm init -y

Install Twigwind: Run npm install -g twigwind to install Twigwind globally.

 npm install -g twigwind

Create HTML File: Create an index.html file and include the generated CSS file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="dist/twigwind.css">
  <title>My Twigwind Project</title>
</head>
<body>
  <div class="bg-blue color-white p-4 border-radius-10px">
    <h1 class="size-2xl">Hello, Twigwind!</h1>
    <p>This is a simple example using Twigwind classes.</p>
  </div>
</body>
</html>

Build CSS: Run twigwind build to generate the CSS file at dist/twigwind.css.

twigwind build

Open in Browser: Open index.html in your web browser to see the styled content.

Twigwind CLI cheat sheet

Command	Description
`twigwind build`	Generates the CSS file based on your configuration.
`twigwind version`	Shows the current version of Twigwind and its dependencies.
`twigwind help`	Displays help information about Twigwind commands.

Option	Description
`--input <path>`	Specifies a custom path to the html dir or file.
`--output <path>`	Specifies a custom output directory for the generated CSS file.
`--minify`	Generates a minified version of the CSS file.
`--watch`	Watch for changes in the input files and rebuild automatically.
`-s`	Saves the Object Model for advanced usage.