DEV Community

dwikbtn
dwikbtn

Posted on

Tailwind tutorial: Make clock/ timer look (in react)

Hi everyone in this tutorial we will learn how to make wood timer look with only tailwind css.

Tailwind CSS is self-described as a utility first CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is centered around how it should be displayed. In short by using tailwind you don't need really need to naming each class name.

Your end project will look like this:
end project

you can see the source code here it's working timer. for the working timer maybe we will do in another part.

Install React with tailwind

In this tutorial we're using create-react-app and tailwind

npx create-react-app my-project
cd my-project
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Enter fullscreen mode Exit fullscreen mode

for config you can see in the official tailwind documentation

Center the div

let's put our app in the center of screen,

<div className="bg-gray-400 min-h-screen flex justify-center items-center flex-col">

</div>
Enter fullscreen mode Exit fullscreen mode

we color the background gray with display flex "justify-center items-center flex-col" part is for center it to x and y axis also we'll make our flex column.

Frame and inside display

//jsx
<div className="timer-frame ">

</div>
Enter fullscreen mode Exit fullscreen mode
@tailwind base;
@tailwind components;
@tailwind utilities;
.timer-frame {
  @apply w-96 h-40 bg-gradient-to-b from-firstGr to-secondGr border-border border-outer rounded-3xl flex flex-row justify-center items-center shadow-2xl;
}
Enter fullscreen mode Exit fullscreen mode
module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        inputText: ["Monoton"],
      },
      colors: {
        border: "#F59D50",
        firstGr: "#EE8C38",
        secondGr: "#F48F32",
        timerBg: "#131514",
      },
      borderWidth: {
        outer: "15px",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

we separate the time-frame into other css file. I usually long tailwind utility to other file.
for the tailwind config, I put my costume color there. For example:

colors: {
        border: "#F59D50",
        firstGr: "#EE8C38",
        secondGr: "#F48F32",
        timerBg: "#131514",
      },
Enter fullscreen mode Exit fullscreen mode

we use gradient using firstr and secondGr for inside frame, so it's not look boring. for the frame we use utility border with above color. the border has utility "rounded" as it said it make round around the div.

Inside Numbers

<div className="inside-timer">04</div>
<div className="inside-timer">04</div>
<div className="inside-timer">04</div>
Enter fullscreen mode Exit fullscreen mode
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

.inside-timer {
  @apply w-24 h-20 bg-timerBg flex justify-center items-center text-white mx-2 text-5xl tracking-widest font-inputText bg-gradient-to-b from-gray-900 to-gray-800;
}
Enter fullscreen mode Exit fullscreen mode

Maybe you already notice we're using external font you can check the font here.
to use it include it in your tailwind css.

 fontFamily: {
        inputText: ["Monoton"],
      },
Enter fullscreen mode Exit fullscreen mode

Again because we're using inside timer more then once we put it in new css class name and apply it.

we use bg-timerBg utility that black color we added before.

Discussion (0)