{"id":12102,"date":"2022-05-16T06:19:09","date_gmt":"2022-05-16T06:19:09","guid":{"rendered":"https:\/\/blog.cloudthat.com\/?p=12102"},"modified":"2024-06-25T11:00:43","modified_gmt":"2024-06-25T11:00:43","slug":"introduction-to-tailwind-css-framework","status":"publish","type":"blog","link":"https:\/\/www.cloudthat.com\/resources\/blog\/introduction-to-tailwind-css-framework","title":{"rendered":"Introduction to Tailwind CSS Framework"},"content":{"rendered":"\n\n\n\n\n\n\n\n\n\n\n\n
\n

TABLE OF CONTENT<\/strong><\/span><\/h3>\n<\/td>\n<\/tr>\n

1. Introduction to Tailwind CSS<\/a><\/td>\n<\/tr>\n
2. Step by Step Guide to Tailwind CSS Installation
\n<\/a><\/td>\n<\/tr>\n
3. Components with Tailwind CSS Button<\/a><\/td>\n<\/tr>\n
4. Build a YouTube card component with Tailwind CSS
\n<\/a><\/td>\n<\/tr>\n
5. How does CSS work?<\/a><\/td>\n<\/tr>\n
6. Advantages of using Tailwind CSS<\/a><\/td>\n<\/tr>\n
7. Conclusion <\/a><\/td>\n<\/tr>\n
8. About CloudThat <\/a><\/td>\n<\/tr>\n
9. FAQs<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

1. Introduction to Tailwind CSS<\/h2>\n

Tailwind CSS is the most popular utility-first CSS framework for rapidly building custom user interfaces for the web. It is a highly customizable collection of low-level CSS utility classes written in PostCSS destined to be customized using JavaScript.<\/p>\n

The first release of Tailwind CSS happened on the 1st of November 2017 on GitHub as an open-source project. Initially, only a side project for Adam Wathan helped him with some of his projects. Still, it became a fully-fledged and popular CSS framework with a new utility-first methodology.<\/p>\n

2. Step by Step Guide to Tailwind CSS Installation<\/h2>\n

Step 1:<\/u> Create a new project folder and go inside your directory by using the following command:<\/strong><\/p>\n

$ mkdir tailwind-sample-01<\/pre>\n
Step 2:<\/u> Initialize a new project that will create a new package.json file by writing the following command:<\/strong><\/p>\n
$ npm init -y<\/pre>\n
Step 3:<\/u> The first dependency which needs to be added to the project is the Tailwind CSS package. The following command is used for installation:<\/strong><\/p>\n
$ npm install tailwindcss<\/pre>\n
or<\/p>\n
$ yarn add tailwindcss<\/pre>\n
Step 4:<\/u> The next step is to add Tailwind to the project’s CSS. Create a new file css\/styles.css and insert the @tailwind directive.<\/strong><\/p>\n
 @tailwind base;\r\n@tailwind components;\r\n@tailwind utilities; \r\n<\/pre>\n
Step 5:<\/u> Next step is to add a Tailwind configuration file by running the following command. The generated file will be present in your root directory (tailwindcss.config.js)<\/strong><\/p>\n
module.exports = {\r\n    theme: {\r\n       extend: {},\r\n    },\r\n\r\nvariants: {},\r\n     plugins: [],\r\n  }<\/pre>\n
Step 6:<\/u><\/strong> Tailwind CSS requires a build process that processes CSS files and makes sure that the Tailwind CSS code is inserted according to the directives used and the Tailwind configuration in place.
\n<\/strong>In addition, we will also use a plugin which is called autoprefixer<\/strong><\/p>\n
$ npm install postcss-cli autoprefixer<\/pre>\n
Step 7:<\/u><\/strong> With those packages installed let’s create a PostCSS configuration file in the project directory<\/strong><\/p>\n
touch postcss.config.js<\/pre>\n
Step 8:<\/u><\/strong> Inside this file, we have to add the following code<\/strong><\/p>\n
module.exports = {\r\nplugins: [\r\nrequire('tailwindcss'),\r\nrequire('autoprefixer'),\r\n]\r\n}<\/pre>\n
Step 9:<\/u> Finally, the last step is to add a script inside our package.json file<\/strong><\/p>\n
\"build\": \"postcss css\/styles.css -o build\/styles.css\"<\/pre>\n
Step 10:<\/u><\/strong> To run this script inside your ide terminal run<\/strong><\/p>\n
npm run build<\/pre>\n
This script will ensure that whatever tailwind classes we are using, we are converting them into original CSS. So, now, inside our build folder, just create an index.html file and link our styles.css file with that. So, whenever we make any changes, those changes are reflected in the user.<\/strong><\/p>\n
Finally, install a live server extension from the extension bar of your preferred
\nFinally, our project will start running on some ports using the live server application<\/strong><\/p>\n
3. Components with Tailwind CSS Button<\/h2>\n
\"Tailwind<\/a><\/p>\n
4. Build a YouTube card component with Tailwind CSS<\/strong><\/h2>\n
\"Tailwind<\/a><\/p>\n
5. How does CSS work?<\/strong><\/h2>\n
When a browser displays a document, it must combine its content with its style information. It processes the paper in two phases:<\/p>\n