1.1.11 • Published 1 year ago
@4design/for-ui v1.1.11
For UI は 株式会社スリーシェイクのデザインシステム「For Design System」のデザイントークンとコンポーネントライブラリを実装したパッケージです。
React と MUI と Tailwind CSS で作られています。
インストール
npm i @4design/for-ui
Peer dependencies のインストール
npm i tailwindcss @mui/lab @mui/material @mui/base react-icons react @tanstack/react-table
npm i --save-dev @types/react
セットアップ
1. Tailwind CSS を導入
Tailwind CSS の CSS を読み込む
global.css
(名前は任意) を作成- 以下の内容を置く
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@layer base {
body {
@apply text-shade-dark-default text-r font-sans antialiased;
}
}
app.tsx
でglobal.css
を読み込む
postcss.config.js
の作成
postcss.config.js
が存在しない場合は作成する。- デフォルトの構成を自分で定義する必要があることに注意 (参考)
以下を追加
plugins: {
tailwindcss: {},
autoprefixer: {},
// ...
}
2. For UI の設定を読み込む
preset の読み込み
preset: [require('@4design/for-ui/tailwind.config.base.js')],
共通フォントの読み込み
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet"
/>
またはこれに相当するものを置いてください
MUI のスタイル上書きのための important 設定
important: #root, // 任意の上位セレクタを指定する
または
important: true;
を指定
(複数の important が必要な場合はこちらを参考にしてください)
tailwind.config.js
設定例
module.exports = {
important: ':is(#__next, .MuiPopover-root)',
presets: [require('@4design/for-ui/tailwind.config.base.js')],
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./node_modules/@4design/for-ui/dist/**/*.js',
],
plugins: [],
};
詳細は /example
以下に実装例があるので参考にしてください。
License
MIT License
Author
4 design (3-shake Inc.)
1.1.11
1 year ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.10
1 year ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.9
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago