Tailwind CSS + ReactJS + Tailblocks = Quick Start Combo
Hello everyone, in this article I want to tell you how to create a quick project using TailwindCSS, ReactJS and Tailblocks.
Let’s start by getting acquainted with technologies.
Tailwind CSS is a CSS library developed by Adam Wathan. It allows you to export CSS to your elements using ready classes. It offers you a great flexibility when writing code because it doesn’t have ready components like Bootstrap, and it’s more customizable for your imagination and design capability.
Of course, these differences bring a lot of criticism. Since there are no ready components of the program, there are those who think that it is not much different from writing inline CSS by naming too many classes.
It also gets criticism as it becomes difficult to understand because of the lack of semantic (semantic) of class nomenclature, which is very close to atomic level. I advise you to read the article below on this topic.
There’s a lot to say about ReactJS , but I think there’s a lot of awareness in people now, I guess there’s no one who’s heard it. For detailed information, I recommend reading the following article and ReactJS’s own document.
What‘s Tailblocks ? Tailblocks is a code repository developed by Mert Cukuren on Github and consists of code blocks created using TailwindCSS. I love to use it in my own projects, and I believe it provides me an excellent speed.
Created in 15 different categories, these code blocks provide great convenience with responsive support, dark/light mode support and different color themes. You can start using these code blocks quickly copying and customize them for yourself. You can easily use these ready-made code blocks by converting them to jsx for your React projects.
Let’s start our project.
I recently prepared a technical service website for a relative of mine, and although I did not have much time for it, I was able to make a quick project using the libraries I mentioned. I want to talk about the way I’ve been doing this project and how I’ve taken advantage of TailwindCSS’s favorite features and the Tailblocks project. The link to the project I mentioned is below.
We quickly create our ReactJS project using create-react-app, assuming that Node is installed on our computer. (Node >= 8.10 and npm >= 5.6)
npx create-react-app my-appcd my-appnpm start
Then I removed the files that we wouldn’t use that came with create-react-app. I included the react-router-dom to control the pagination structure of our project.
Let’s include our TailwindCSS library.
yarn add tailwindcss postcss-cli autoprefixer -DAfter incorporating the necessary dependencies in our project using the yarn add command, we run the following command. This command creates tailwind.config.js for our project.
npx tailwind init —fullTailwind needs a build process and we use PostCSS for it. For this we create the file postcss.config.js in the directory where we are in.
touch postcss.config.jsAnd in our file we write the following codes.
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
],
};There are a few steps left to complete our process of incorporating TailwindCSS into the project. We create a file called styles under the src directory and open a style file named tailwind.css in it. We include the following codes and thus allow Tailwind to import CSS codes from required packages.
@tailwind base;
@tailwind components;
@tailwind utilities;As a final step, we replace the scripts section in our package.json file with the following codes.
"scripts": {
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
},We launch our application.
yarn startBy importing the ./styles/main.css file to the app.js file in our project, our project can easily be used with TailwindCSS.
import React from 'react';
import './styles/main.css';
function App() {
return (
<div class="h-64">
<div class="p-4 m-4 bg-green-600">
<h1 class="text-2xl font-bold text-white">Merhaba</h1>
</div>
</div>
);
}
export default App;Now you can quickly design your pages using TailwindCSS and Tailblocks ready code blocks. In the rest of my article, I’ll be talking about how I use them and what I like about Tailwind.
Tailblocks code blocks and usage examples within the project.
You can use the following block example to quickly prepare a photo catalog.
You can design a page of different tabs and present it on your page in an interactive way.
You can quickly create a contact page and provide address information with Google maps.
Animate the element quickly with TailwindCSS
You can quickly animate the cards you use. You can easily animate the element you want to apply this feature by adding class=“transform transition duration-500 hover: scale-110” code.With the “hover:” feature, you can easily apply the hover selector feature. You can customize it using other prefixes such as “focus:”, “active:”, “group-hover:” and create easy animations.
You can even create Netflix slider animation by inserting your cards into a slider and applying this feature. In the example below I have not used a slider but you can test the animation on codepen.
You can examine the example I made with the new animation classes that came with the TailwindCSS 1.6 update in the following study.
Skeleton Loading Cards with Tailwind CSS 1.6 — animate-pulse
I tried to convey my knowledge to you within my experience. If you would like to contact me about any of your comments, advice and feedback, please contact me through the following accounts. Thank you for taking the time to read this article.
