End to End Technology Solutions
Tailwind:
Tailwind is the CSS framework that is used for developing unique designs. Tailwind does not work like other CSS frameworks like Bootstrap and materializes it doesn’t come with predefined components. Tailwind provides you with a set of CSS helper classes with the help of these classes you can create custom designs.
Why do we use Tailwind in our Projects?
Tailwind is designed to be component-friendly. It is much easier to write and read and also easier to separate the site’s elements into small components and not to use objects and classes in the components. It is easier to maintain and for testing purposes because we have to write the CSS on an inline basis. Custom styling can be provided to the components with the help of the Tailwind CSS framework. The framework is highly customizable because we have to use the file tailwind.config.js file in our project.
The Tailwind CSS is used for the default mobile-first approach. With the help of this framework, we can develop a complex responsive layout freely.
How to setup Tailwind with the project:
Now we discuss how we integrate Tailwind with the project. First, we create a new project from scratch. Create a new project folder by using this command run this command in your terminal.
$ mkdir tailwind_demo
Now go into the newly created project folder (tailwind_demo)
$ cd tailwind_demo
Now we initialize the node module in our project and create package.json with help of this command
$ npm init -y
This command enables the Node.js package manager to manage the dependency in our project. The first dependency which we use in our project is the tailwind package. We can install the tailwind package by the following command:
$ npm install tailwindcss
From this command we make sure tailwind is downloaded and saved in the node_module folder and dependency is added into the package.Json file.
Now a step comes when we add the tailwind to the project’s CSS. This is done by creating the new file css/style.css and importing the @tailwind base, @tailwind components, @ tailwind utilities.
@tailwind base; @tailwind components; @tailwind utilities;
Create the Tailwind config file:
To complete the tailwind setup we have to create the new initial configuration file by following the command.
$ npx tailwindcss init
This command creates the new file named tailwind.config.js with the following content inside.
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [],
}
How to process CSS with Tailwind:
For the processing of CSS file Tailwind require’s the build process. To set up the build process there is one option which is PostCSS. PostCSS is the tool that transforms the CSS with javascript. Tailwind is also working with plugins and it is easy to perform the tailwindcss with the tailwind postcss plugin.
Now we have to install PostCSS and autoprefixer by using the following command
$ npm install postcss-cli autoprefixer
After successfully installing the plugin now we have to create the postcss config file in our project directory.
$ touch postcss.config.js
Insert the following content in the newly created file.
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
Now we have to specify that the postcss process should perform CSS processing with the tailwind and with the auto fixer.
Insert the following content in the package.json file.
"build": "postcss css/styles.css -o build/styles.css"
Here, we have to execute the script with the help of the following command.
$ npm run build
Using with HTML file:
First, we have to create the new file named Index.html and in the following HTML code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Tailwind CSS Demo</title> </head> <body> <div class="h-64"> <div class="p-4 m-4 bg-green-600"> <h1 class="text-2xl font-bold text-white">Tailwind CSS Demo</h1> </div> <div class="p-4 m-4 bg-green-300 h-full"> <h2 class="text-green-900">Have much fun using Tailwind CSS</h2> </div> </div> </body>
Example:
How to style a button with the tailwind.
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">My Tailwind Button</button>