JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js"></script>
<div id="content"></div>
JavaScript
require.config({
paths: {
"react": 'https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min',
"react-inline-style": "http://dowjones.github.io/react-inline-style/dist/react-inline-style",
}
})
require(["react", "react-inline-style"], function (react, reactInlineStyle) {
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
//var React = require("react");
//var Style = require("react-inline-style");
var React = react;
var Style = reactInlineStyle;
///////////////////////////////////////////////////////////////////////////////
TextComponentStyle = Style.define({
textComponent: {
fontWeight: "bold",
fontStyle: "italic"
}
});
var TextComponent = React.createClass({
mixins: [TextComponentStyle()],
click: function () {
this.style.define({
textComponent: {
fontStyle: "normal",
letterSpacing: "2px"
}
});
this.forceUpdate();
},
render: function () {
return React.createElement("p", {
style: this.style("textComponent"),
onClick: this.click
},
"textComponent");
}
});
///////////////////////////////////////////////////////////////////////////////
Style = Style.define({
first: {
textComponent: {
color: "red"
}
},
second: {
textComponent: {
color: "blue"
}
}
});
var RootComponent = React.createClass({
mixins: [Style()],
render: function () {
return React.createElement("div", {}, [
React.createElement(TextComponent, {styleNamespace:"first"}),
...