---
tags: 前端工具
---
# Twind
- [tailwind 文件](https://tailwindcss.com/docs)
## 1. 安裝基本架構
### 套件
1. VS code
- Tailwind CSS IntelliSense
- 設定 > 搜尋tailwind > emmet
- 或```"tailwindCSS.emmetCompletions": true```

### Tailwind config viewer
- [viewer說明](https://www.npmjs.com/package/tailwind-config-viewer)

yarn add -D tailwind-config-viewer

**需裝tailwindcss**(目前純為了用tailwind config viewer而裝)

yarn add -D tailwindcss

- 打開viewer
package.json scripts

"tailwind-config-viewer": "tailwind-config-viewer -o"

### Theme
詳細config
https://unpkg.com/browse/tailwindcss@2.0.2/stubs/defaultConfig.stub.js

### CSS IN JS

[css-in-js 文件](https://twind.dev/docs/handbook/getting-started/css-in-js.html)

export default {
  props: {
    size: {
      type: String,
      default: 'normal',
    },
    type: {
      type: String,
      default: 'classList',
    },
  },

  setup (props) {
    const classList = ref(null)

    const commonStyle = [
      apply`cursor-pointer font-bold focus:outline-none active:outline-none relative`,
      {
        '&:before': {
          content: '""',
          backgroundColor: 'white',
          width: '100%',
          height: '100%',
          display: 'block',
          position: 'absolute',
          top: '0',
          left: '0',
          'z-index': '-1',
          'border-radius': '8px',
          background: `url(${require('./images/icon-arrow-down.svg')})`
        },
        '&:not(:disabled):hover': {
          color: theme('colors.brand'),
          boxShadow: '0 8px 24px 0 #ceb996;',
          backgroundImage: 'none;',
          backgroundColor: theme('colors.white'),
        },
        '&:not(:disabled):active': {
          boxShadow: '0 8px 24px 0 rgba(206, 185, 150, 0.48);',
          backgroundColor: theme('colors.dark'),
          color: theme('colors.light-grey'),
          backgroundImage: 'linear-gradient(113deg, #ceb996, #e9ddc7);',
        },
        '&:disabled': apply`opacity-32`,
      },
    ]

    const commonSize = {
      normal: apply`rounded-8 px-8 py-12`,
      small: apply`rounded-4 pt-8 pb-7 py-4`,
    }
    const styles = {
      lv1: [
        apply`text-light-grey`,
        {
          backgroundImage: `linear-gradient(135deg, #ceb996, #dccfb5)`,
          boxShadow: 'inset 0 -4px 0 0 rgba(42, 48, 58, .16);',
        },
      ],
      lv2: apply`text-light-grey bg-dark`,
    }

    classList.value = css(commonStyle, commonSize[props.size], styles[props.type])

    return {
      classList,
    }
  },
}