add documentation

README.md

@@ -124,14 +124,16 @@ For a list and description of features offered by the AsyncAPI React component,
 
 ## Styles
 
-To use default styles import them as follows:
+To use the default styles import them as follows:
 
 ``` js
-import "@asyncapi/react-component/styles/default.css";
-// or minified version
 import "@asyncapi/react-component/styles/default.min.css";
 ```
 
+The above file hasn't built-in [TailwindCSS Preflight](https://tailwindcss.com/docs/preflight) styles which reset the base styles for the main HTML tags. If you want to add styles with the CSS reset, you should import the `@asyncapi/react-component/styles/default.reset.min.css` styles.
+
+If you want to add custom styles (especially colors) to the component, see [theming](./docs/features/theming.md) documentation.
+
 ## Playground
 
 This repository comes in with a [Playground application](https://asyncapi.github.io/asyncapi-react/). Test it to see the component in action and play with it before you use it in your application.

docs/README.md

@@ -8,6 +8,7 @@ This directory contains the following documents that relate to the project:
   - [Development Guide](./development/guide.md) describes how to set up a development environment, write, and run tests. It also contains the naming and architecture convention.
 - features:
   - [Anchors](./features/anchors.md) describes internal anchors in the AsyncAPI component.
+  - [Theming](./features/theming.md) describes how to generate/add custom styles for component.
   - [Highlight markdown's code blocks](./features/highlight.md) describes how to add custom language configuration for `highlight.js` used in the component.
 - usage:
   - [Using in Angular](./usage/angular.md) describes how to use the AsyncAPI component in Angular project.

docs/features/theming.md

@@ -1 +1,53 @@
 # Theming
+
+## Overview
+
+The component internally uses for styling the utility-first [TailwindCSS](https://tailwindcss.com/) framework. Check this document to known how to customize styling for component.
+
+## Generate theme from configuration file
+
+As we read in the official docs for [TailwindCSS](https://tailwindcss.com/):
+
+> Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.
+
+...and this is how the way of customizing styles for the component was also designed. The configuration file should be in the form of a [TailwindCSS configuration file](https://tailwindcss.com/docs/configuration). Then the custom configuration file must be passed to the NodeJS script, which is located inside the `./tools/styles/script.js` in the component's package.
+
+The script itself takes as arguments:
+
+```bash
+node ./tools/styles/script.js <output-file> <config-file-path>
+```
+
+where:
+- `<output-file>` is a relative path for the output css file. It must contains the name of the css file. Example: `./output/custom-theme.css`
+- `<output-file>` is a relative path to the custom [TailwindCSS configuration file](https://tailwindcss.com/docs/configuration).
+
+Important notes:
+
+- The custom configuration is deeply merged with the [default configuration file](../../library/tools/styles/tailwind.config.js).
+
+- To generate the production-ready, tree-skahable, css styles you should run the script with `NODE_ENV=production` environment:
+
+  ```bash
+  NODE_ENV=production node ./tools/styles/script.js ./output/custom-theme.css ./custom-config.js
+  ```
+
+  Generating production styles will add a `.min.css` suffix to the generated files.
+
+- Script will generate two separate css files, one with `.reset.css` suffix with [Preflight](https://tailwindcss.com/docs/preflight) styles onboard and second without `Preflight` onboard. If you use your own base styles in your project, you should use this one with the `.reset.css` suffix.
+
+- If you installed the `@asyncapi/react-component` package in your project, script should be run with the `./node_modules/@asyncapi/react-component/tools/styles/script.js` path in a root of project.
+
+## Change manually styles
+
+> **NOTE:** This is not the recommended method - better to use the [configuration file](#generate-theme-from-configuration-file).
+
+To manually change the style you can write your own css properties for appropriate TailwindCSS class. For example, to change the a very frequently used color, you can override it by css class:
+
+```css
+.text-gray-700 {
+  color: red;
+}
+```
+
+> **NOTE:** Remember that the given override must be loaded after loading the styles from the component.

library/package.json

@@ -67,6 +67,7 @@
     "@asyncapi/avro-schema-parser": "^0.2.0",
     "@asyncapi/openapi-schema-parser": "^2.0.0",
     "@asyncapi/parser": "^1.5.0",
+    "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.5",
     "highlight.js": "^10.7.2",
     "isomorphic-dompurify": "^0.13.0",
@@ -81,7 +82,6 @@
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.9.0",
-    "@tailwindcss/typography": "^0.4.0",
     "@types/dompurify": "^2.0.4",
     "@types/highlight.js": "^10.1.0",
     "@types/jest": "^26.0.23",