If you have been developing websites for a while, you must be aware of various CSS frameworks like Bootstrap, Foundation, Materialize, etc., and if you like working with PHP too, especially Laravel, you might have come across Tailwind CSS.
Whats is so new about tailwind?
The first beta release being in 2017, tailwind just like other CSS frameworks was built and adopted by major tech giants like Mozilla and Algolia. The budding startups like PingPing and RightMessage adopted it swiftly as it was developed as a utility-first CSS framework for rapidly building custom designs.
Let see some of its implementations with CSS.
INSTALLATION (Tailwind)
There are 2 ways you can implement Tailwind CSS in your HTML project.
- Via the CDN.
- Using NPM and Processing the config file
SHOW ME THE CODE.
Via the CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Using NPM and Processing the config file
This step will require a little bit more knowledge about how to work with Node.js and Javascript. You will need to use the terminal to first initialize node in the root of your project folder.
npm install
You will be asked some questions regarding the project title, description, versioning, and so on. The package.json file will mostly hold information about your project and the dependencies that you need, such as Tailwind CSS.
Afterward, use the following command to install Tailwind CSS in the current project.
npm install tailwindcss --save
This will add Tailwind CSS as a project dependency, and also install the library files inside the node_modules folder. The --save tag ensures that the library is added to the package.json file.
Create a CSS file and include the Tailwind CSS directives
Since you now have the Tailwind CSS installed locally and isolated from any of any changes that might cause your version to change, you can now create a CSS file say main.css, and add the below code to it.
@tailwind base; @tailwind components; @tailwind utilities;
Once you have done that, these directives will be interchanged with the actual Tailwind CSS code when you use PostCSS later.
The next step is Setting up the Tailwind configuration file.
Being the most important part we will now configure the config file for Tailwind CSS so that we can later easily customize the classes by modifying and adding new colors, fonts shadows, etc.
This is something new, because usually when you pull something from a CDN it doesn’t allow you to make any sort of changes(like in bootstrap), but here we get a choice to override the default rules and customize the existing components provided to us by the CDN initially.
Run the following command in your terminal to generate a tailwind.config.js file:
npx tailwindcss init
By running this command, a new configuration file called tailwind.config.js will be generated with the following code:
// tailwind.config.js
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Processing Tailwind CSS
This is the last step (I promise) to include Tailwind to your HTML using the PostCSS method. In case you need to add plugins inside the configuration file use the code below.
module.exports = {
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
}
And finally, run the following command in your terminal
npx tailwindcss build main.css -o output.css
This will generate a CSS file named output.css which can later be included in your HTML using the below code.
<link href=”./output.css” rel=”stylesheet”>
Happy Coding!