https://github.com/hyperse-io/tailwind-layer

Make tailwind IntelliSense list my custom class in @layer Utilities
https://github.com/hyperse-io/tailwind-layer

Last synced: about 2 months ago
JSON representation

Make tailwind IntelliSense list my custom class in @layer Utilities

• Host: GitHub
• URL: https://github.com/hyperse-io/tailwind-layer
• Owner: hyperse-io
• License: mit
• Created: 2023-11-21T07:12:55.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-29T15:36:20.000Z (10 months ago)
• Last Synced: 2024-08-01T11:49:05.504Z (10 months ago)
• Language: TypeScript
• Size: 4.2 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# @hyperse/tailwind-layer



  

    

  

  

    

  

  

    

  

  

    

  



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;

  }

}

```