{"id":56602,"date":"2023-02-06T10:37:51","date_gmt":"2023-02-06T05:07:51","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56602"},"modified":"2023-02-12T20:55:55","modified_gmt":"2023-02-12T15:25:55","slug":"tailwind-css-learning-for-absolute-beginners","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/tailwind-css-learning-for-absolute-beginners\/","title":{"rendered":"Tailwind CSS: Learning For Absolute Beginners"},"content":{"rendered":"

\"\"<\/p>\n

What is Tailwind CSS ? <\/strong><\/h2>\n

Tailwind CSS is basically a utility-first CSS framework. Rapidly build modern websites without ever leaving your HTML. With utility classes, We can style elements on hover, focus, and more. It is a highly customizable, low-level CSS framework. This CSS framework is packed with classes like flex, pt-4, text-center and rotate-90 etc.. Pull up for p It’s fast, flexible, and reliable with zero-runtime. Using responsive utility classes.<\/p>\n

Why use Tailwind?<\/strong><\/h2>\n

As we previously mentioned, Tailwind CSS eases the frontend work because of its extensive built-in classes<\/a> that you can simply call into any HTML element. So this means you don\u2019t have to leave your HTML file to customize any HTML code. It provides a default theme<\/a> with preset values for the color palette, fonts, breakpoints, spacing, and much more. This theme is also highly customizable.<\/p>\n

Powerful –<\/strong> Makes the styling process faster because of its ready-to-use classes that can be further extended.
\nNo more Naming –<\/strong> You don\u2019t have to rack your brain to come up with the aptest class name
\nReusability –<\/strong> Save your CSS file from bulking up by using and re-using classes.
\nGlobal Warning –<\/strong> Worry less about breaking the design because you don\u2019t need to make global changes in the CSS file.
\nResponsive –<\/strong> Lets you build complex responsive interfaces with its broad set of utilities and breakpoint prefixes.
\nImproved Site Performance<\/strong> – Cleans out all the unnecessary code from your bulky CSS file. Usually ships less than 10kb of CSS.<\/p>\n

Benefits of Tailwind CSS?<\/h2>\n

1. <\/strong>You aren’t wasting energy inventing class names.
\n2.<\/strong> You keep your custom CSS files small.
\n3.<\/strong> Maintaining a Tailwind CSS project is much easier than maintaining a large traditional css file Minimum lines of Code in CSS file.
\n4.<\/strong> Faster Ul building process.<\/p>\n

Ways to use Tailwind CSS on your Local System<\/strong><\/h2>\n

1.\u00a0 Play with CDN<\/strong><\/p>\n

Simply add the Play CDN script tag to the of your HTML file, and start using Tailwind\u2019s utility classes to style your content.<\/p>\n

<script<\/span> src<\/span>=<\/span>\"https:\/\/cdn.tailwindcss.com\"<\/span>><\/script><\/span><\/pre>\n
\"\"<\/p>\n
 <\/p>\n
We can add our custom CSS.<\/strong><\/p>\n
Edit the tailwind.config object to customize your configuration with your design tokens.<\/p>\n
Use type=”text\/tailwindcss” to add custom CSS that supports all of Tailwind’s CSS features.<\/p>\n
\n
<style type=\"text\/tailwindcss\">\r\n\r\n@layerutilities {\r\n\r\n.wrapper {\r\n\r\nmax-width: 1200px;\r\n\r\nmargin: 0auto;\r\n\r\npadding: 020px;\r\n\r\n}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\n\r\ntailwind.config = {\r\n\r\ntheme: {\r\n\r\nextend: {\r\n\r\ncolors: {\r\n\r\nclifford:'#da373d',\r\n\r\nbtn_color:'green',\r\n\r\n}\r\n\r\n}\r\n\r\n}\r\n\r\n}\r\n\r\n<\/script><\/pre>\n<\/div>\n
\"\"<\/pre>\n
In the above example warapper is added to the custom class in the utilities classes and clifford attribute is added in colors object.<\/p>\n
Now we can use all the tailwind utility classes and designed layout as the requirement.<\/p>\n
2. Using Tailwind CLI <\/strong><\/h2>\n
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.<\/p>\n
Steps to install tailwind css.<\/strong><\/p>\n
Step 1:<\/strong> Install the Node.js and npm stable versions.<\/p>\n
$ sudo apt install nodejs -y\r\n$ sudo apt install npm -y<\/pre>\n
Step 2:<\/strong> Verify the installed Node.js npm version.<\/p>\n
$ node --version\r\n$ npm --version<\/pre>\n
\"\"<\/p>\n
Step 3 :<\/strong> Install Tailwind CSS<\/p>\n
$ npm install -D tailwindcss\r\n$ npx tailwindcss init<\/pre>\n
\"\"<\/p>\n
Step 4:<\/strong> Once tailwind Installed we have to configure the template path
\nIn tailwind.config.js<\/p>\n
\n
\/** @type {import('tailwindcss').Config} *\/\r\n\r\nmodule.exports = {\r\n\r\ncontent: [\".\/src\/**\/*.{html,js}\"],\r\n\r\ntheme: {\r\n\r\nextend: {},\r\n\r\n},\r\n\r\nplugins: [],\r\n\r\n}<\/pre>\n<\/div>\n
\"\"<\/p>\n
Step 5:<\/strong> Add the Tailwind directives to your CSS
\nAdd the @tailwind directives for each of Tailwind\u2019s layers to your main CSS file.<\/p>\n
@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;<\/pre>\n
\"\"<\/p>\n
Step 6:<\/strong> Start the Tailwind CLI build process<\/p>\n
Run the CLI tool to scan your template files for classes and build your CSS.<\/p>\n
\n
npx tailwindcss -i .\/src\/css\/input.css -o .\/public\/css\/styles.css --watch<\/pre>\n<\/div>\n
\"\"<\/p>\n
Step 7:<\/strong> Start using Tailwind in your HTML<\/p>\n
Add your compiled CSS file to <head> start using Tailwind\u2019s utility classes to style your content.<\/p>\n
\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"..\/public\/css\/style.css\"><\/pre>\n<\/div>\n
\"\"
\nNow we can use all the tailwind utility classes and designed layout as the requirement.<\/p>\n
Customizing Screens<\/h2>\n
Customizing the default breakpoints for your project.<\/strong><\/p>\n
Configuring custom screens<\/strong><\/p>\n
You define your project\u2019s breakpoints in the theme.screens section of your tailwind.config.js file. The keys become your responsive modifiers (like md:text-center), and the values are the min-width where that breakpoint should start.
\nCommon device resolutions inspire the default breakpoints:<\/p>\n
\n
module.exports = {\r\ntheme: {\r\n\r\nscreens: {\r\n\r\n'sm': '640px',\r\n\r\n\/\/ => @media (min-width: 640px) { ... }\r\n\r\n'md': '768px',\r\n\r\n\/\/ => @media (min-width: 768px) { ... }\r\n\r\n'lg': '1024px',\r\n\r\n\/\/ => @media (min-width: 1024px) { ... }\r\n\r\n'xl': '1280px',\r\n\r\n\/\/ => @media (min-width: 1280px) { ... }\r\n\r\n'2xl': '1536px',\r\n\r\n\/\/ => @media (min-width: 1536px) { ... }\r\n\r\n}\r\n\r\n}\r\n\r\n}\r\n\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
Overriding the defaults<\/strong><\/p>\n
To completely replace the default breakpoints, add your custom screens configuration directly under the theme key:<\/p>\n
\n
theme: {\r\n\r\nscreens: {\r\n\r\n'sm': '576px',\r\n\r\n\/\/ => @media (min-width: 576px) { ... }\r\n\r\n'md': '768px',\r\n\r\n\/\/ => @media (min-width: 768px) { ... }\r\n\r\n'lg': '991px',\r\n\r\n\/\/ => @media (min-width: 991px) { ... }\r\n\r\n'xl': '1280px',\r\n\r\n\/\/ => @media (min-width: 1280px) { ... }\r\n\r\n'2xl': '1536px',\r\n\r\n\/\/ => @media (min-width: 1536px) { ... }\r\n\r\n},\r\n\r\n},<\/pre>\n<\/div>\n
\"\"<\/p>\n
Adding larger breakpoints<\/strong><\/h2>\n
If you want to add larger screen size the easiest way to add an additional larger breakpoint is using the extend key:<\/p>\n
\n
module.exports = {\r\n\r\ntheme: {\r\n\r\nextend: {\r\n\r\nscreens: {\r\n\r\n'3xl': '1600px',\r\n\r\n},\r\n\r\n},\r\n\r\n},\r\n\r\n}\r\n\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
Adding smaller breakpoints<\/h2>\n
If you want to add an additional small breakpoint, you can\u2019t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.
\nInstead, override the entire screen key, re-specifying the default breakpoints:<\/p>\n
\n
theme: {\r\n\r\nscreens: {\r\n\r\n'smobile': '475px',\r\n\r\n...defaultTheme.screens,\r\n\r\n},\r\n\r\n},\r\n\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
Using custom screen names<\/strong><\/p>\n
You can name your custom screens whatever you like, and are not limited to following the sm\/md\/lg\/xl\/2xl convention that Tailwind uses by default.<\/p>\n
\"\"<\/p>\n
In the same way, we can customize colors<\/a>, spacing<\/a> etc.<\/p>\n
Adding Custom Styles<\/h2>\n
Using arbitrary values<\/strong><\/p>\n
While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while, you need to break out of those constraints to get things pixel-perfect.
\nWhen you find yourself really needing something like top: 117px to get a background image in just the right spot, use Tailwind\u2019s square bracket notation to generate a class on the fly with any arbitrary value:<\/p>\n
\n
<div class=\"top-[117px]\">\r\n\r\n<!-- ... -->\r\n\r\n<\/div><\/pre>\n<\/div>\n
Adding component classes<\/strong><\/p>\n
Use the components layer for any more complicated classes you want to add to your project that you\u2019d still like to be able to override with utility classes.
\nTraditionally these would be classes like card, btn, badge \u2014 that kind of thing.<\/p>\n
\n
@layer components {\r\n\r\n.card {\r\n\r\nbackground-color: theme('colors.white');\r\n\r\nborder-radius: theme('borderRadius.lg');\r\n\r\npadding: theme('spacing.6');\r\n\r\nbox-shadow: theme('boxShadow.xl');\r\n\r\n}\r\n\r\n\/* ... *\/\r\n\r\n}\r\n\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
Adding custom utilities<\/strong><\/p>\n
Add any of your own custom utility classes to Tailwind\u2019s utility layer:<\/p>\n
\n
@layer utilities {\r\n\r\n.wrapper {\r\n\r\nmax-width: 1200px;\r\n\r\nmargin: 0 auto;\r\n\r\npadding: 0 20px;\r\n\r\n}\r\n\r\n}<\/pre>\n<\/div>\n
\"\"<\/p>\n
For more exploration, you can go through\u00a0 here<\/a><\/p>\n
Thanks for reading this article, Hope, you will find this helpful.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
What is Tailwind CSS ? Tailwind CSS is basically a utility-first CSS framework. Rapidly build modern websites without ever leaving your HTML. With utility classes, We can style elements on hover, focus, and more. It is a highly customizable, low-level CSS framework. This CSS framework is packed with classes like flex, pt-4, text-center and rotate-90 […]<\/p>\n","protected":false},"author":1546,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":35},"categories":[3429],"tags":[4862,4860,4857,2591],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56602"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1546"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=56602"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56602\/revisions"}],"predecessor-version":[{"id":56704,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56602\/revisions\/56704"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=56602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=56602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=56602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}