In this blog, we will be using TailwindCSS to style our react components.
Let's explore all the ways of writing CSS
Inline CSS
An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
const divStyle = {
color: 'blue',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
// Or we can directly use the value of
// divStyle object without defining a seperate const
function HelloWorldComponent() {
return <div style={{color: 'blue'}}>
Hello World!
</div>;
}
CSS classes are generally better for performance than inline styles.
Native CSS
Instead of using inline styles, it's common to import a CSS stylesheet to style a component's elements. Writing CSS in a stylesheet is probably the most common and basic approach to styling a React application, but it shouldn't be dismissed so easily. Writing styles in "plain" CSS stylesheets is getting better all the time, due to an increasing set of features available in the CSS standard.
SASS/SCSS
SASS is an acronym that stands for: Syntactically Awesome Style Sheets. SASS gives us some powerful tools, many of which don't exist in normal CSS stylesheets. It includes features like variables, extending styles, and nesting. SASS allows us to write styles in two different kinds of stylesheets, with the extensions .scss and .sass.
SCSS styles are written in a similar syntax to normal CSS, however SASS styles do not require us to use open and closing brackets when writing style rules.
Here is a quick example of an SCSS stylesheet with some nested styles:
/* styles.scss */
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Compare this with the same code written in a SASS stylesheet:
/* styles.sass */
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
Since this is not regular CSS, it needs to be compiled from SASS into plain CSS. To do so in our React projects, you can use a library like node-sass. If you are using a Create React App project, to start using .scss and .sass files, you can install node-sass with npm:
npm install node-sass
Libraries
There are lots of libraries out there, which you can use for styling your apps. They come with pre-built components which you can either directly use or customise according to your specific needs. Some popular libraries are:
Styled Components
Similar to how React allowed us to write HTML as JavaScript with JSX, CSS-in-JS has done something similar with CSS. CSS-in-JS allows us to write CSS styles directly in our components' javascript (.js) files. Not only does it allow you write CSS style rules without having to make a single .css file, but these styles are scoped to individual components. In other words, you can add, change or remove CSS without any surprises. Changing one component's styles will not impact the styles of the rest of your application. CSS-in-JS often makes use of a special type of JavaScript function called a tagged template literal. What's great about this is that we can still write plain CSS style rules directly in our JS!
Here's a quick example of a popular CSS-in-JS library, Styled Components:
import styled from "styled-components";
const Button = styled.button`
color: limegreen;
border: 2px solid limegreen;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
&:hover {
opacity: 0.9;
}
`;
export default function App() {
return (
<div>
<Button>Click me</Button>
</div>
);
}
TailwindCSS framework
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime.
After creating your project, run:
npm install -D tailwindcss postcss
npx tailwindcss init
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate tailwind.config.js.
Add the paths to all of your template files in your tailwind.config.js file.
// tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Create a .postcssrc file in your project root, and enable the tailwindcss plugin.
// .postcssrc
{
"plugins": {
"tailwindcss": {}
}
}
Create a ./index.css file and add the @tailwind directives for each of Tailwind’s layers.
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Run your build process with npx parcel index.html.
npx parcel index.html
Add your CSS file to the <head> and start using Tailwind’s utility classes to style your content.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./index.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Why do we have .postcssrc file?
Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
.postcssrc is a configuration file for postcss package. It tells our bundler (parcel) to also compile tailwind css into normal css while bundling things up and building dev/prod build.
Having used Tailwind, our app currently looks like this:
Cool right?
Pros and Cons of using Tailwind
Pros
Easy to use and debug.
Less code is shipped.
No duplicate CSS.
Bundle size is small.
Faster development experience because developers don't have to switch between files.
Customisable.
Gives developers more control.
Cons
There is an initial high learning curve associated.
Takes new developers more time during development.
Makes code look ugly due to lots of classes.
Compromises readability.
That's all for now folks. See you in the next blog!