# aic-tailwind-scss

> css-in-html-class

Latest version **1.1.0** (published 2023-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install aic-tailwind-scss
pnpm add aic-tailwind-scss
yarn add aic-tailwind-scss
bun add aic-tailwind-scss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-09-22 |
| First published | 2023-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | lerryann |
| Maintainers | lerryann |
| Keywords | css, scss, sass, vue, css-in-html |

## Links

- npm: https://www.npmjs.com/package/aic-tailwind-scss
- Repository: https://github.com/aic-larry/aic-tailwind-scss
- Homepage: https://github.com/aic-larry/aic-tailwind-scss#readme
- Issues: https://github.com/aic-larry/aic-tailwind-scss/issues
- npm.io page: https://npm.io/package/aic-tailwind-scss

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-09-22
- 1.0.6 — 2023-09-22
- 1.0.5 — 2023-09-22
- 1.0.4 — 2023-09-21
- 1.0.3 — 2023-09-21
- 1.0.2 — 2023-09-21
- 1.0.1 — 2023-09-21
- 1.0.0 — 2023-09-21

## README

## install
Using npm:
```
npm install aic-tailwind-scss sass sass-loader --s-d
```
or using yarn:

```
yarn add aic-tailwind-scss sass sass-loader -d
```
## config
`main.js：`
```
import Vue from 'vue'
import App from './App.vue'

import 'aic-tailwind-scss'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```
`vue.config.js：`
```
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ...,
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
            @import "aic-tailwind-scss/variables"; // default variables
          `,
        // additionalData: `
        //     @import "~@/variables.scss"; // customer variables
        //   `,
      },
    }
  },
  ...
}

```
## variables
`src/variables.scss：`
```
$num: 0; //循环计数器
$sum: 10; //循环次数，用于控制生成class的数量
$step: 2; //步长
$pixis: "rpx"; //单位
//颜色数组，可拓展，下方2个数组长度必须一致
$color_name_list: "blue", "green", "yellow", "red", "gray";
$color_list: #007aff, #4cd964, #f0ad4e, #dd524d, #636e72;
```
## usage
```
<div class="w-full mt-20 mb-40 text-lg">
  hello aic!
</div>
```

---
_Source: https://npm.io/package/aic-tailwind-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._