Tailwind CSS
Tailwind CSS is a utility-first CSS framework. With this it means that it doesn’t have those predesigned elements and components. All you get with tailwind CSS is a bunch of classes which you can use in combination to create a beautiful UI.
Tailwind is much lower and customizable than bootstrap ,materialize etc. which means its more flexible and can manipulate in to our design easily.
The main difference is tailwind CSS from normal styles we include in a document is that Tailwind CSS is directly added to classes of the respective tags we need the style. Rather than the typical ways of
- Having inline styles with styles tag,
- Having a linked styles sheet ,
and having the styles done separately,
Before using Tailwind ,
As usual since tailwind is only a framework we cant use Tailwind as a standalone tool. Rather it requires,
- HTML
- CSS,
itself in order to use Tailwind.
CSS prior knowledge is required due to the fact that the classes or commands we add for a class using Tailwind are from the normal vanilla source CSS . What I mean my this is although we use (max-w-6l= to adjust width) the W stands for with and this wont make sense unless we know CSS itself. OR to explain further p-2 means the amount of padding we can add. and this wont make sense unless we know what padding means from learning CSS.
Prerequisites
In order to use Tailwind since it is a framework and does not come to our system or documents in default we need to install it manually .
In order to do that we can go to the official website itself (Tailwind CSS — Rapidly build modern websites without ever leaving your HTML.)
If you are a Ubuntu or a Mac user all you have to do is ,
run the command — npm install tailwindcss
But this installation requires npm prior to that so if you are a windows users you will have to get npm .In order to do that since npm comes wit node JS we have to install node JS (Node.js (nodejs.org))
ones node , npm is installed then we can install tailwind , in order to check whether node installed correctly on command prompt or in terminal we can run the command (node -v) , if a version shows up when this command is run. then we have successfully installed node JS.
Getting started
ones we have done the above we can use our favorite code editor to set up Tailwind CSS to your documents. For me its VS code , so I can open the terminal in VS code and run the command
npm init -y (to fill out all setting in default )
then a package.json file will appear , then we can run
npm install tailwindcss
this will install Tailwind as a dependency and we can see Tailwind along with the version on the section dependencies which appear in the package.json folder which was set up earlier .
now we create a SRC (source) and a public folder , and add a style.css in the SRC folder. We do this in order to import the base functionality of Tailwind .
then we can make a tailwind directive by ,
@tailwind base
@tailwind components
@tailwind utilities
adding the above to the style.css file in the SRC folder.
and then we can give the input and the output sources by adding them in the script section in the package.json file. for example we can add in the script section,
“build-css” : “tailwindcss build src/style.css -o public/style.css
and to run the script we can run
npm run build-css
this will process and output our file in the path we gave , in this case public/style.css
ones these steps are done we are good to go and now we can use the tailwind utility classes in our documentation :).
