填充不适用于使用快子的输入 css

Question

我有以下布局：

<article class='pb5 bg-near-white'>
            <header class='tc ph4-ns pt4 pt5-ns'>
                <h1 class='tc blue'>Let's get started posting your question</h1>
            </header>
            <div class=''>
                <div class='pa4 bg-white measure db center f5 f4-ns lh-copy'>
                    <form class='center mt3 mb4 justify-around'>
                        <fieldset class='ba b--transparent'>
                            <div class='mt4'>
                                <label class='db mb2 b'>Title</label>
                                <input
                                    class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
                                    placeholder='title'
                                    onChange={handleTitleChange}
                                ></input>
                            </div>
                            <div class='mv4'>
                                <label class='db mb2 b'>Content</label>
                                <textarea
                                    class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
                                    placeholder='Content Here!'
                                    cols='50'
                                    rows='5'
                                    onChange={handleBodyChange}
                                ></textarea>
                            </div>
                            <a
                                class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
                                onClick={handlePostQuestion}
                            >
                                Submit
                            </a>
                        </fieldset>
                    </form>
                </div>
            </div>
        </article>

它使用内联快子 css 来创建基本的表单布局。但是，我最终得到以下 ui:

填充似乎不适用于标题 input 字段，但它确实适用于 textarea 字段。当我将 input 标签更改为 textarea 标签时，填充应用，但问题是这似乎是一个临时修复。我做错了什么吗？

Answer 1

在输入元素上，添加 class border-box 或设置 type="text" 将使其按预期运行。

原因是，Tachyons 没有给所有输入元素“border-box”框大小；更详细地解释 in the docs. Also visible in the source code.

填充不适用于使用快子的输入 css

padding not applying to input using tachyons css

css

reactjs

tachyons-css