Styled-components vs Tailwind CSS

Benchmark created on

Preparation HTML


    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/6.1.11/styled-components.min.js" />
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>
<div id="root2"></div>

Setup


const rootEl = document.getElementById('root');
const container = ReactDOM.createRoot(rootEl);

const rootEl2 = document.getElementById('root2');
const container2 = ReactDOM.createRoot(rootEl2);

let data = new Array(500).fill();

data = data.map((el,i) => (
	{
		count: Math.round(Math.random()*100),
		label: `Filter ${i}`,
		value: `some-filter-value-${i}`,
	}
));



container.render(React.createElement(App));
container2.render(React.createElement(App));

Test runner

Ready to run.

Testing in
TestOps/sec
Styled Components

function App () { 
const StyledDiv = useMemo(() => {

return styled.div`
	height: 10px;
	width: 10px;
	${({ color }) => `background-color: ${color};`};
`}, [])


const StyledDiv2 = useMemo(() => styled.div`
	height: 10px;
	width: 10px;
	${({ color }) => `background-color: ${color};`};
`, [])


const StyledDiv3 = useMemo(() => styled.div`
	height: 10px;
	width: 10px;
	${({ color }) => `background-color: ${color};`};
`, [])

const StyledDiv4 = useMemo(() => styled.div`
	height: 10px;
	width: 10px;
	${({ color }) => `background-color: ${color};`};
`, [])

return data.map((item, i) => React.createElement(StyledDiv, {children: item.label, key: item.label, color: Math.random() })) }
ready
Tailwind
function App () { 
const Div = useMemo(() => 'div', [])
const Div2 = useMemo(() => 'div', [])
const Div3 = useMemo(() => 'div', [])
const Div4 = useMemo(() => 'div', [])

return data.map(item => React.createElement(Div, {children: item.label, key: item.label, className: 'bg-red-500 h-2.5 w-2.5'  })) }
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.