I'm new in Tailwind CSS. I build to the user interface of nextjs application by starting "mobile first" like everybody. Flex direction, background color are working at mobile size screen. So tailwind css is correctly importing nextjs application. When change the screen size, not change to flex direction or background color of navigation bar.
Navbar code is shared below:
export default function Home() {
return (
<div>
<Head>
<title>Tailwind CSS Tutorial</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<header className="bg-gray-700 shadow-md sm:bg-red-900">
<nav className="flex flex-col items-center sm:flex-row sm:justify-between sm:items-left">
<div className="w-screen text-center px-5 py-2 text-white border-b sm:border-b-0 sm:w-auto">
W3Learn
</div>
<div className="py-2">
<a className="px-10 text-white" href="/html-lecture"> HTML</a>
<a className="px-10 text-white" href="/css-lecture"> CSS </a>
<a className="px-10 text-white" href="/js-lecture"> JS </a>
</div>
</nav>
</header>
</main>
</div>
)
}
tailwind configuration is shared below:
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {},
screens: {
},
},
variants: {
extend: {},
},
plugins: [],
}
Cause of problem is missing breakpoints configuration. I add the below breakpoints
configuration lines in screens. Actually, this lines are coming default and though missing lines, this app must be running without error.
'sm': '640px',
// => #media (min-width: 640px) { ... }
'md': '768px',
// => #media (min-width: 768px) { ... }
'lg': '1024px',
// => #media (min-width: 1024px) { ... }
'xl': '1280px',
// => #media (min-width: 1280px) { ... }
'2xl': '1536px',
// => #media (min-width: 1536px) { ... }
Related
I followed the tutorial perfectly and made a website while using the live server extension and it was applying. I use Chrome, Edge and Opera to check the .html file itself but no style was applied in the matter of fact it still shows as applied in the live server extension
The files
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/output.css" rel="stylesheet" />
</head>
<body class="m-0 bg-blue-500 p-0">
<nav class="m-0 h-full w-full space-x-4 border bg-blue-400 p-6">
<h1 class="text-3xl font-bold drop-shadow-md md:filter-none">
Safer Internet
</h1>
<div
class="absolute top-7 right-14 space-x-10 stroke-2 font-extrabold hover:stroke-black"
>
<button
class="position inline-block text-right duration-700 hover:text-white"
>
Home
</button>
<button
class="position inline-block text-right duration-700 hover:text-white"
>
More
</button>
<button
class="position inline-block text-right duration-700 hover:text-white"
>
About
</button>
</div>
</nav>
<div>
<p
class="absolute left-64 top-2/4 translate-x-2/4 translate-y-2/4 text-center text-xl font-bold"
>
To be able to know how to be safe on the internet click the button
bellow.
</p>
<div
class="relative top-96 flex translate-y-2/3 items-center justify-center text-center"
>
<button
class="relative top-9 w-1/6 rounded-xl bg-blue-900 p-4 font-extrabold duration-700 hover:bg-black hover:text-white"
>
More
</button>
</div>
</div>
</body>
</html>
tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
}
style.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
I tried everything and it didn't work and I expected the styles to apply on my browser.
Proper approach to follow when using Tailwind-CLI
1. Know about your file structure. Use:
public
|_ tailwind_base.css
👆 File from which the output.css is produced
#tailwind base;
#tailwind components;
#tailwind utilities;
|_ output.css
src
|_ index.html
👆 Link with the output.css using
<link href="../public/output.css" rel="stylesheet" />
Watch it as
npx tailwindcss -i ./public/tailwind_base.css -o ./public/output.css --watch
Specify your html/js in tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
Use tailwindcss classes happily in your index.html file 😇
I am trying to move my first nav link (home icon) down so it doesn't get covered by the 'book free consultation' button above. It doesn't seem to apply the padding and not sure what I am doing incorrectly
CSS:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
HTML:
<div class="header-navigation-wrapper">
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<div id="mega-menu-wrap-primary" class="mega-menu-wrap">
<div class="mega-menu-toggle">
<div class="mega-toggle-blocks-left"></div>
<div class="mega-toggle-blocks-center"></div>
<div class="mega-toggle-blocks-right">
<div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-1" id="mega-toggle-block-1" tabindex="0"><span class="mega-toggle-label" role="button" aria-expanded="false"><span class="mega-toggle-label-closed">MENU</span><span class="mega-toggle-label-open">MENU</span></span></div>
</div>
</div>
<ul id="mega-menu-primary" class="mega-menu max-mega-menu mega-menu-horizontal" data-event="hover_intent" data-effect="disabled" data-effect-speed="200" data-effect-mobile="slide_left" data-effect-speed-mobile="400" data-mobile-force-width="body" data-second-click="close" data-document-click="collapse" data-vertical-behaviour="accordion" data-breakpoint="1023" data-unbind="false" data-hover-intent-timeout="300" data-hover-intent-interval="100">
<li class="mega-nav-menu-links mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-home mega-current-menu-item mega-page_item mega-page-item-2 mega-current_page_item mega-align-bottom-left mega-menu-flyout mega-menu-item-1521 nav-menu-links" id="mega-menu-item-1521"><a class="mega-menu-link" href="https://test.com/staging/4326/" tabindex="0"><i class="fa fa-home" aria-hidden="true"></i></a></li>
...
</ul>
</div>
</ul>
</nav>
<!-- .primary-menu-wrapper -->
</div>
Image to show issue:
Try using this if it works #mega-menu-primary > li:first-child {}
I've edited this after another look at your code.
I've noticed your using the id selectorwhen you are looking for classes. The # looks for ids, but you want to look for classes, so use a . instead in your #media query
#media only screen and (max-width: 600px) {
.mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
Use margin like so:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
margin-top:20px !important;
}
}
margin helps push the nav down.
I am using wow.js with animate.js to show animation on mouse scroll.
I want to change the direction of animation on small device like on large screen it should animate from right and on small device it should animate from bottom.
Here is a snippet to show what I need.
new WOW().init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<section class="wow fadeInRight" >Section 1</section>
<section class="wow fadeInUp" data-wow-delay="1s">Section 1 on mobile</section>
You may simply do this:
new WOW().init();
.desktop {
display: block;
}
.mobile {
display: none;
}
#media all and (max-width:767px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<section class="wow fadeInRight desktop">Section 1</section>
<section class="wow fadeInUp mobile">Section 1 on mobile</section>
I think you don't have to use two content for this , just use one element and change animation class for mobile.
You can reduce the content.
I just add a media query to change the the animation class from anime.min.css
You can change the Media Query Value(767px)
new WOW().init();
#media only screen and (max-width: 767px) {
.anim-mob-up.fadeInRight {
-webkit-animation-name: fadeInLeft !important;
animation-name: fadeInLeft !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<section class="wow fadeInRight anim-mob-up">Section 1 Both Desk & Mobile</section>
Remove class fadeInRight from your html.
Detect screen width using JS.
If it less or equal to 1024, add fadeInUp to element, otherwise add fadeInRight to element.
const wow = document.querySelectorAll('.wow')
const dir = window.innerWidth <= 1024 ? 'fadeInUp' : 'fadeInRight'
Array.prototype.forEach.call(wow, el => el.classList.add(dir))
new WOW().init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<section class="wow" >Section 1</section>
<section class="wow" data-wow-delay="1s">Section 1 on mobile</section>
I have col-sm-4 Bootstrap classes applied to some list elements that are inside a jQuery slider (lightslider) component.
When the screen is between 801px and 991px, I want the list element to increase to 160px since currently, it is too small and the data is squashed a bit.
In Chrome developer tool, the styling is applied from the following css:
element.style {
width: 142px;
margin-right: 10px;
}
This is my HTML:
<ul id="responsive" >
#foreach (var item in Model.Categories)
{
<li id="list-size-increase" class="col-sm-4 align-centre list-size-increase">
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</li>
}
</ul>
I've attempted with this id class, but I see no change:
#media (min-width: 801px) and (max-width: 991){
.list-size-increase{
width:160px;
}
}
This solved it:
#media (min-width: 801px) and (max-width: 991px){
.list-size-increase {
width: 160px !important;
}
}
The !important keyword allows new styling to take precedence over inline styles. Oh how I love remembering and learning.
The #media rules aren't making the different PHP pages appear and disappear. Am I doing it wrong? Also is there a better way of doing this?
This is the style within my index page and it's contained in the <head>. I'm also using external style sheets but I didn't think it'd be necessary to include them.
<style type="text/css">
<!-- Show Normal -->
#media only screen and (min-device-width: 768px) {
div#show-normal { display:block; }
div#show-mobile { display:none; }
}
<!-- Show Mobile -->
#media only screen and ((min-height : 320px) and (max-device-width : 667px)) {
div#show-normal { display:none; }
div#show-mobile { display:block; }
}
</style>
This is all of the contents of my body tag
<body>
<!-- Default -->
<div id="show_normal">
<!-- HEADER -->
<?php
include("pages/default/header.php");
?>
<!-- CONTENT -->
<div id="contentContainer">
<?php
include ("pages/default/infoStrip.php");
include ("pages/default/productStrip.php");
include ("pages/default/slideshowStrip.php");
include ("pages/default/footer.php");
?>
</div>
</div>
<!-- Mobile -->
<div id="show_mobile">
<!-- HEADER -->
<?php
include("pages/mobile/header.php");
?>
<!-- CONTENT -->
<div id="contentContainer">
<?php
include ("pages/mobile/infoStrip.php");
include ("pages/mobile/productStrip.php");
include ("pages/mobile/slideshowStrip.php");
include ("pages/mobile/footer.php");
?>
</div>
</div>
</body>
the closing parenthesis after
(max-device-width : 667px)
is missing
or better: take out one of the opening parenthesis in
((min-height : 320px)