JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<p>If the condition is met (the width is greater than 400px) on first render, the 'inside conditional block' widget never has its <code>init()</code> function called. Because of this, clicking on the middle button causes nothing to happen.</p>

<p>Resizing the container in such a way that the condition goes from false to true fixes this issue.</p>

<main></main>

<script id='template' type='text/ractive'>
    <p>width: {{width}}px</p>
    
    <widget message='inline'/>

    {{#if width > 400 }}
        <widget message='inside conditional block'/>
    {{/if}}
    
    {{#if true }}
        <widget message='inside always true conditional block'/>
    {{/if}}
    
    <sizer width='{{width}}'/>
</script>

<script id='widget' type='text/ractive'>
    <button on-click='alert'>{{message}}</button>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

code {
    background-color: #eee;
    padding: 0.2em;
}

JavaScript

Ractive.components.widget = Ractive.extend({
    template: '#widget',
    init: function () {
        console.log( 'initing widget', this.get( 'message' ) );
        this.on({
            alert: function () {
                alert( 'button clicked: ' + this.get( 'message' ) );
            }
        });
    }
});


Ractive.components.sizer = Ractive.extend({
    template: '<div></div>',
    init: function () {
        console.log( 'initing sizer' );

        var self = this, div = this.find( 'div' );
        
        window.addEventListener( 'resize', resize );
        resize();
        
        function resize () {
            self.set( 'width', div.getBoundingClientRect().width );
        }
    }
});

var ractive = new Ractive({
    el: 'main',
    template: '#template'
});