open-index/open-npm huggingface dataset:
npm package: @hyperse/tailwind-layer
Description: Compile your tailwindcss components into tailwind plugins and enjoy full autocompletion!
Latest version: 1.0.5

# @hyperse/tailwind-layer

<p align="left">
  <a aria-label="Build" href="https://github.com/hyperse-io/tailwind-layer/actions?query=workflow%3ACI">
    <img alt="build" src="https://img.shields.io/github/actions/workflow/status/hyperse-io/tailwind-layer/ci-integrity.yml?branch=main&label=ci&logo=github&style=flat-quare&labelColor=000000" />
  </a>
  <a aria-label="stable version" href="https://www.npmjs.com/package/@hyperse/tailwind-layer">
    <img alt="stable version" src="https://img.shields.io/npm/v/%40hyperse%2Ftailwind-layer?branch=main&label=version&logo=npm&style=flat-quare&labelColor=000000" />
  </a>
  <a aria-label="Top language" href="https://github.com/hyperse-io/tailwind-layer/search?l=typescript">
    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/hyperse-io/tailwind-layer?style=flat-square&labelColor=000&color=blue">
  </a>
  <a aria-label="Licence" href="https://github.com/hyperse-io/tailwind-layer/blob/main/LICENSE">
    <img alt="Licence" src="https://img.shields.io/github/license/hyperse-io/tailwind-layer?style=flat-quare&labelColor=000000" />
  </a>
</p>

Compile your tailwindcss components into tailwind plugins and enjoy full IntelliSense autocompletion!

## Usage

1. yarn add @hyperse/tailwind-layer

2. packages.json

```json
  "scripts": {
   "build:twl": "twl -p \"**/globals.css\"",
  }
```

3. yarn run build:twl will output `./tailwindcss-extend.cjs`
4. update `plugins` in `tailwind.config.ts`

```ts
import type { Config } from "tailwindcss";

const config: Config = {
  ...
  plugins: [require("./tailwindcss-extend.cjs")],
};
export default config;
```

4. re-lunch your vscode ide

```css filename="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'keen-slider/keen-slider.min.css';

* {
  scroll-behavior: smooth;
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--red);
  transform-origin: 0%;
}

@layer components {
  .hyperce-head-xl {
    @apply font-extrabold text-4xl md:text-6xl;
  }
  .hyperce-sub-head {
    @apply font-medium text-base md:text-lg;
  }
  .hyperce-head-sup {
    @apply text-sm font-semibold;
  }

  .hyperce-card-header {
    @apply text-lg md:text-xl font-bold;
  }

  .hyperce-card-description {
    @apply text-xs md:text-sm font-medium;
  }

  .hyperce-btn-text-low {
    @apply text-base font-bold;
  }
  .hyperce-btn-text-high {
    @apply text-lg font-bold;
  }
}
```
npm package: @hypersign-dev/hypersign-ui
Description: This project contains React components, icons, and typography for building applications across Hypersign.
Latest version: 0.8.34

# Hypersign UI (Component Library)

This project contains React components, icons, and typography for building applications across Hypersign.

## Development

### Local usage

In order to import this package locally, you must first link it to the project you are working on.
To link the project, first run the `npm install` command to make sure all dependencies are installed.

#### Register the package

In the directory for this package, run the following to register this package as a linkable package.
`npm link` or `yarn link`

This will register the `hypersign-ui` package as a globally linkable package.

#### Link to your project

Now, move over to your target package. (i.e. whatever will be using hypersign-ui).

Link hypersign-ui to your target package by running:
`npm install ../path/to/your/package`
or
`yarn add link:../path/to/your/package`

#### Handle import alias resolutions to your project

In order to properly import hypersign-ui into your project, you will need to tell vite where to look.
We can do this by adding the following to the `vite.config.ts` file in the target project.

```
resolve: {
    preserveSymlinks: true,
    alias: {
      '@hypersign-dev/hypersign-ui': resolve(__dirname, '../../hypersign-ui/src')
    }
  },
```

Be sure to update the `../../hypersign-ui/src` to the relevant path according to your individual file structure.

### Storybook

We are currently using Storybook for development and testing of components.

- Be sure to install dependencies with `npm install`
- Run the Storybook server with `npm run storybook`
- Running the Storybook server will also run `npm run storybook:css`, which overrides the `index.css` file with any used tailwind classes in the project. This is necessary for all styles to take effect.

Also, TailwindCSS is being used for all styling. Within Hypersign UI, all styling with Tailwind classes are prefixed with `ui-`:

```html
<div className="ui-flex ui-flex-col ui-gap-1">...</div>
```



## Deployment

We're working on it!

This is getting updated as we move the package from npm.js to AWS CodeArtifact.

#### Authentication

Open a terminal and run `npm login`

You will be prompted for you username, password, and email.

Validate your identity by running `npm whoami`

#### Deployment

Update the version number and run `npm run build` or `yarn run build`

Deploy the package to npm. Currently, the project is flagged as public, but that will be fixed in later versions.

`npm publish --access public`

The `--access public` argument is required because the package is a scoped package.

#### Validation

Navigate to [npm.js](https://npm.js)

Search for `@hypersign-dev/hypersign-ui`

Validate that the version number you deployed is the latest version.