padding not applying to input using tachyons css

Question

I have the following layout:

<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>

which uses tachyons inline css in order to create a basic form layout. However, I end up with the following ui:

The padding seems not to be applying to the title input field, but it does apply to the textarea field. When I change the input tag to a textarea tag, the padding applies but the problem is this seems to be a temporary fix. Am I doing something wrong?

Answer 1

On the input element, adding the class border-box or setting type="text" will make it behave as you expect.

Reason being, Tachyons does not give all input elements "border-box" box sizing; explained in more detail in the docs. Also visible in the source code.