@abiser/railwind 中文文档教程
Railwind
Rails 上的 React 组件
使用 TypeScript 在 tailwind css 之上构建的 React 组件库。
Goal
这个库的目的是生成一组核心的 React 组件，这些组件是使用 tailwind 配置选项静态类型化的。
What is the point?
使用 tailwind css 的一个好处是您无需编写 css，而是从现有的预构建类中选择它。 如果这些类型随后被映射到 TypeScript 类型并分配给 props，我们现在可以在代码级别控制组件的样式，因为编译器将不允许任何在生成的类型中不存在的 props。 然后，我们可以在可视化编辑器中公开这些类型，以在构建 ui 组件时通过在编辑器中显示选项来简化 ui 工作流程。
Using Railwind
Railwind 应该导入到项目中，以便为特定用例生成设计系统。 示例：用于特定组织的 ui 库，用于样式和主题一致的多个应用程序。
Editing railwind core components
运行
yarn run build-watch运行
playground脚本以直观地测试更改
Using the playground
cd 到 playground 目录，运行 yarn install 然后运行 yarn run start 启动示例游乐场以测试 railwind 组件
Updating Railwind Options
示例：添加新颜色
Add new color to
tailwind.config.js运行
yarn run scripts:generateTailwindTypes以生成更新类型运行
yarn run build:railwind以生成新的样式表
Build for deployment
在
package.json运行
yarn run build构建生产包运行
npm publish
TODO
- Add UI tests built with React Testing Library
Railwind
React components on rails
A React component library built on top of tailwind css using TypeScript.
Goal
The purpose of this library is to generate a core set of React components that are statically typed using tailwind configuration options.
What is the point?
A benefit of using tailwind css is that you don't write css, you select it from existing prebuilt classes. If these types are then mapped to TypeScript types and assigned to props we now can control the styling of components at the code level as the compiler will not allow for any props that do not exist in the generated types. We can then expose these types in a visual editor to streamline the ui workflow by presenting the options in the editor when building ui components.
Using Railwind
Railwind should be imported into a project in order to generate a design system for a specific use case. Example: A ui library for a specific organization that is used in several applications where the styling and theme are consistent.
Editing railwind core components
Run
yarn run build-watchrun the
playgroundscript to visually test changes
Using the playground
cd to playground directory, run yarn install and then run yarn run start to start up the example playground to test railwind components
Updating Railwind Options
Example: Adding a new color
Add new color to
tailwind.config.jsRun
yarn run scripts:generateTailwindTypesto generate updates typesRun
yarn run build:railwindto generate new stylesheet
Build for deployment
Bump the version in
package.jsonRun
yarn run buildto build a production packageRun
npm publish
TODO
- Add UI tests built with React Testing Library
