# Overview

{% hint style="info" %}
**GitBook tip:** your product docs aren't just a reference of all your features! use them to encourage folks to perform certain actions and discover the value in your product.
{% endhint %}

**Overview of cxcss and its Purpose**

CxCss is a powerful CSS library that aims to provide all the capabilities and flexibility of native CSS directly from classnames. It simplifies the process of applying styles to HTML elements by allowing you to leverage classnames to achieve a wide range of styling options.

With cxcss, you can easily create and manage complex styles without writing extensive CSS code. It enables you to define classnames that encapsulate specific styling rules, making your styles modular, reusable, and easy to maintain.

**Installation Instructions**

To start using cxcss in your project, follow these simple installation steps:

1. Install cxcss from npm as a dev dependency by running the following command:

   ```bash
   npm install --save-dev cxcss
   ```
2. Once cxcss is installed, you can run the watch compiler by executing the following command:

   ```bash
   npx cxcss
   ```

   This command sets up the watch compiler, which automatically detects changes in your CSS files and recompiles them as needed. Alternatively, you can use the `--build` flag for a production build:

   ```bash
   npx cxcss --build
   ```
3. Optionally, you can include the `cxcss` command in your start scripts in the `package.json` file. For example, in Next.js, you can modify the `"dev"` script as follows:

   ```json
   {
     "scripts": {
       "dev": "cxcss & next dev"
     }
   }
   ```

   This configuration allows you to run both the cxcss compiler and the Next.js development server simultaneously.
4. By default, running the compiler in watch or build mode generates an `index.css` file in the root of your project. However, if you prefer the output file to be located in a different directory or customize other aspects of cxcss, you can achieve various configurations using the `cx.config.json` file.

Here are a couple of example overviews from products with really great docs:

#### cx.config.json

The `cx.config.json` file allows you to customize and configure cxcss according to your project requirements. Here are the configurations you can achieve with the `cx.config.json` file:

* **Output Directory**: Specify the output directory for the compiled CSS file. By default, the output file is generated in the root of your project.

  Example `cx.config.json` file:

  ```json
  {
    "output": "path/to/output/directory/"
  }
  ```
* **Watch Directory**: Define the directory that cxcss should watch for changes during the watch mode. This optimization enhances the watch process performance by focusing on specific directories rather than the entire project.

  Example `cx.config.json` file:

  ```json
  {
    "watchDirectory": "src/styles/"
  }
  ```

  In the above configuration, cxcss will only watch the `"src/styles"` directory for changes.

By utilizing the `cx.config.json` file, you can tailor cxcss to your specific project needs and achieve desired configurations for output, watching directories, and preprocessor integration.

## Quick links

{% content-ref url="overview/what-we-do" %}
[what-we-do](https://codennerd.gitbook.io/cxcss/overview/what-we-do)
{% endcontent-ref %}

{% content-ref url="overview/our-features" %}
[our-features](https://codennerd.gitbook.io/cxcss/overview/our-features)
{% endcontent-ref %}

## Get Started

We've put together some helpful guides for you to get setup with our product quickly and easily.

{% content-ref url="fundamentals/getting-set-up" %}
[getting-set-up](https://codennerd.gitbook.io/cxcss/fundamentals/getting-set-up)
{% endcontent-ref %}

{% content-ref url="fundamentals/getting-set-up/setting-permissions" %}
[setting-permissions](https://codennerd.gitbook.io/cxcss/fundamentals/getting-set-up/setting-permissions)
{% endcontent-ref %}

{% content-ref url="fundamentals/getting-set-up/inviting-members" %}
[inviting-members](https://codennerd.gitbook.io/cxcss/fundamentals/getting-set-up/inviting-members)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.