TailwindCSS and NextJS Starter Guide
Will TailwindCSS kill traditional CSS?
Probably not, since it uses regular CSS under the hood, but it is a fairly new way of styling websites and webapps using utility classes.
Motivation
If you’ve had a project that uses a common.css or styles.css sheet for the whole application you may have noticed that it will become very hard to maintain.
SCSS, SASS and frameworks such as Bootstrap have made it easier but it is still a pain to maintain a 1000 line css file or to accomplish certain tasks.
TailwindCSS uses so called utility classes such as m-4 rounded-lg bg-white . These classes mean a margin of 4, rounded corners and a white background.
It might seem hard to maintain all the classes you might have to add this way but we’ll get into that later on.
Let’s start
I will use npm to install TailwindCSS and I will use a simple NextJS project to run the code.
If you use another framework you can skip ahead a bit. You can also use Yarn if you’d like.
Installing NextJS
NextJS is a simple framework to build React webapplications. Since it is very easy to start with it I will use this for simplicity sake.
In your terminal, run npm initand npm i next react react-dom to install NextJS, React and ReactDOM.
Add the following scripts:
Next we need to add a /pages/ directory with a index.js in it.
NextJS works using a pages directory for easy routing. But since this is a Tailwind showcase we will not into it any deeper.
Run npm run dev in your terminal, go to localhost:3000 and see if it works.
Installing TailwindCSS
TailwindCSS has two ways of using it. One way is to manually parse a style.tailwind.css file to a css file, and the other way is automatically by using certain frameworks. You can read more about that here.
Let’s run npm install tailwindcss@latest postcss@latest autoprefixer@latest in our console to install TailwindCSS, PostCSS and Autoprefixer.
Next run npx tailwindcss init -p to initialize Tailwind. This will create a tailwind.config.jsfile in which you can add options which I will cover later on.
If we update our index.js by adding a few utility classes we can run our server again to see that the styling works.
Basic Tailwind
TailwindCSS comes with a wide range of colors prebuilt into it that you can check out here.
In the docs you can find almost anything you would want since Tailwind is incredibly powerful. So let’s make a button with hover states to check out the prefixing utilities in Tailwind.
First we create a simple button without any fancy hover states.
Try to see what we’re adding, we are adding some padding on the x axis as well as some padding on the y axis. We update the styling of the text within the button and add a background.
Hover states
To add hover states (or focus states) on the button you need to prefix the classnames with something. The default is hover: , so you would add a shadow on hover by adding: hover:shadow for example or hover:bg-green-600 to change the background color.
You can also change the text styling, text size, or anything you would want. So let’s add something.
If you run this code and hover over the button you will see that the background changes. You can also add hover prefixes to the div above or the paragraph tag if you would want to. Try to play around with it before we move on.
Maintaining Tailwind classes
To maintain all the classes on buttons and other reusable components we can use the @apply directive in a base css file.
For NextJS we need to add a _app.js file in /pages with some minimal code. Let’s also add a styles.tailwind.css file as well.
In this _app.js we will import our new css. Let’s add some code to make all h1 tags have the text-3xl text-green-800 classes.
If you run this code you should see that our unstyled h1 Is now green and big. The same applies to using css classes in your styles.tailwind.css file.
NextJS Automatically compiles the Tailwind code to regular CSS, otherwise you might have to compile it yourself.
Config
I must admit I haven’t used the tailwind.config.js file much, but for some it is very useful to declare primary colors, new themes or other functions. You can read about it here.
Responsiveness
Another strength of Tailwind is easy responsive websites using prefixes like we did with hover.
The sm:, md:, lg:, xl:, 2xl: prefixes are used for responsiveness. The style will automatically be updated if your page hits the breakpoints when resizing.
Let’s add a few classes in a new div to see how they work.
If you run this code and resize your window you will see the background color of the last div change at the predefined breakpoints.
What’s next?
Well, this concludes the very basics of Tailwind. You can check out TailwindUI for inspiration to try and recreate some basic components. Once you remember a fair share of classes you can quickly style responsive websites without writing a single line of CSS.
Good luck!
