I have a project where I'm using Django as backend and tailwind for the css. tailwind is not giving me any errors and is finding classes in my files but not generating the css. the only class that its working for is bg-blue-500 and nothing else. if anyone could think of why this may be happening or how to fix is I would really appreciate it.
html page
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Auctions{% endblock %}</title>
<link rel="stylesheet" href="{% static 'auctions/output.min.css' %}">
</head>
<body>
<h1>Auctions</h1>
<div>
{% if user.is_authenticated %}
Signed in as <strong>{{ user.username }}</strong>.
{% else %}
Not signed in.
{% endif %}
</div>
<ul class="nav">
<li class="nav-item bg-red-500">
<a class="nav-link" href="{% url 'activeListings' %}">Active Listings</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item bg-blue-500">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
<hr>
{% block body %}
{% endblock %}
</body>
</html>
tailwind.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
h1 {
#apply text-4xl;
}
h2 {
#apply text-3xl;
}
h3 {
#apply text-2xl;
}
h4 {
#apply text-xl;
}
}
package.json
{
"name": "jstools",
"version": "1.0.0",
"description": "",
"main": "tailwind.config.js",
"scripts": {
"build": "tailwind build -i ../auctions/tailwind.css -o ../auctions/output.css && cleancss -o ../auctions/output.min.css ../auctions/output.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.4.12",
"clean-css-cli": "^5.6.1",
"tailwindcss": "^3.1.8"
}
}
tailwind config
/** #type {import('tailwindcss').Config} */
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
content: {
enabled: false, //true for production build
content: ['../../templates/auctions/*.html', '../../templates/**/*.html']
},
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px'
},
extend: {},
},
variants: {},
plugins: [],
}
Because there's no nav-item nav-link or nav in tailwindcss you can look at the tailwindcss documentation for the available css classes that you can use.
You can also register your own component by adding it to the tailwind config file or directly to the css file
#layer components {
.nav-item {
#apply 'tailwind css classes'
}
}
Related
When I open and close a menu item, there is no animation. I would like to know how to create an animation, please?
HTML file
<div class="wrapper">
<!-- Top Menu -->
<div class="sidebar">
<!-- Menu Item -->
<ul>
<li
*ngFor="let menu of menus; let i = index"
[class.active]="menu.active"
>
<ng-container>
<a class="item" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</a>
<ul *ngIf="menu.active">
<li *ngFor="let submenu of menu.submenu" class="submenu">{{submenu.name}}</li>
</ul>
</ng-container>
</li>
</ul>
</div>
</div>
I don't know if it's possible to do it in Angular or CSS? I made you a reproduction of the project => Stackblitz.
the easer is using Angular animations. add this animation to your component
animations:[
trigger('accordion', [
transition(':enter', [
style({ height: 0 }),
animate('1000ms', style({ "height": '*' })),
]),
transition(':leave', [
animate('100ms', style({ "height": 0 }))
])
]),
]
See that, when "enter" start with style:height=0 and animate to reach style:height=* (the * main that reach the "normal" height) and you use "leave" to animate and change the style to "height=0".
Then just use
<ul #accordion *ngIf="menu.active">
<li *ngFor="let submenu of menu.submenu" class="submenu">
{{submenu.name}}
</li>
</ul>
NOTE1: don't forget import the BrowserAnimationsModule in your module
NOTE2: You need add to your .css
.wrapper ul li ul{
overflow:hidden;
}
Your forked stackblitz
I think you should change app.component.ts like this.
selectMenu(parentMenu: { name: string, active:boolean }): void {
this.menus.forEach((menu) => {
if (menu.name === parentMenu.name) {
menu.active = !menu.active;
}
});
}
}
because Each time active is pressed, the boolean value should change.
have a nice day:)
I'm using a custom menu. How do I set the color of the default text ("Select county", "Select area") to color #ccc, and the color of the actual value to #000?
<div class="form-control>
<div class="login-placeholder" #click="isAddShow=!isAddShow">{{ addrItem }}
</div>
<ul v-show="isAddShow" class="l-select-wrap">
<li v-for="(item,i) in addSelectData" :key="i" #click="addSelectOption(item)"
class="l-select-item">
<span>{{item.name}}</span>
</li>
</ul>
</div>
data:{
isAddShow: false,
addrItem : "Select county"
}
addSelectData: [{
name: "Tapie",
},
{
name: "Taichung",
},
{
name: "Tainan",
},
{
name: "Kaohsiung",
},
],
Use style block or set style locally
Solution 1 : Use style block
<style>
.login-placeholder{
color:"#ccc"
}
.l-select-wrap{
color:"#000"
}
</style>
Solution 2 : Set style locally
<div class="form-control">
<div class="login-placeholder" style="color:#ccc;" #click="isAddShow=!isAddShow">{{ addrItem }}
</div>
<ul v-show="isAddShow" class="l-select-wrap" style="color:#000;">
<li v-for="(item,i) in addSelectData" :key="i" #click="addSelectOption(item)"
class="l-select-item">
<span>{{item.name}}</span>
</li>
</ul>
</div>
Reference: CSS Colors
I want to apply text color when expected id will clicked
<nav class="navbar ">
<ul class="navbar-nav">
<li *ngFor="let item of items">
<a class="nav-link" >{{item.title}}</a>
</li>
</ul>
</nav>
items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]
controller-
private name;
this.routes.params.subscribe((params)=>{
this.data=params['id'];
console.log(this.data);
})
this.Service.getAllItems().subscribe((data)=>{
this.items=data;
for(let i of this.items){
if(i.id == this.data){
this.name=i.title;
}
}
For clicked id I have to apply text color red.How to apply it.Please help
You could have a variable with the active id, which is set when you click:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public activeId;
setIdActive(id) {
this.activeId = id;
}
}
And in your html:
<nav class="navbar ">
<ul class="navbar-nav">
<li *ngFor="let item of items">
<a (click)="setIdActive(item.id)" class="nav-link" [ngClass]="{'apply-color': item.id == activeId}" >{{item.title}}</a>
</li>
</ul>
</nav>
apply-color it's a class with the color you want
This answer caters to condition where we need to highlight all the options which are clicked
If you want to change the color of all the links which are clicked and not just the last one, I advise you to use a HostListener directive.
consructor(privte elem: ElementRef, private renderer: Renderer) { }
#HostListener('click',['$event']) //in your case, the event parameter can be omitted
Click(event: Event) {
this.renderer.setElementStyle(elem.nativeElement, 'color', 'red');
}
And if just the CSS style for a:visited works for you (not tried by myself), it would be the best solution
You can you [ngClass] for this problem. When you click the link pass the item to the function. this will change the activeId. By using [ngClass] the class will apply to the link.
let activeId:number;
makeALinkActive(item){
this.activeId = item.id;
}
items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]
.red{
color: red;
}
<nav class="navbar ">
<ul class="navbar-nav">
<li *ngFor="let item of items">
<a class="nav-link" [ngClass]="{'red':activeId === item.id}" (click)='makeALinkActive(item)'>{{item.title}}</a>
</li>
</ul>
</nav>
items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]
I'm trying to implement CSS3 selectors using :target for a drawer animation, without luck.
Using $locationProvider.html5Mode(false); the animations is not working. Turning that feature to "true" is allowing me :target selector but the routing is not working and displaying anything.
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
'myApp.services'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
$locationProvider.html5Mode(false);
}]);
...
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
Anyone has a suggestion or idea?
Use a reference app to get started, and ng-animate to integrate the animation:
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/daneden/animate.css/master/animate.css">
<style>
a {
font-size: 300%;
}
#Squidward:target { color: red }
</style>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>
angular.module('demo', [
]).controller('MainCtrl', function(
$scope
){
$scope.items = [{
name: 'Squidward'
}, {
name: 'Plankton'
}];
$scope.add = function() {
$scope.items.push({
name: 'Patrick'
});
};
});
</script>
</head>
<body ng-controller="MainCtrl">
<div>
Add More Patrick
<ul>
<li ng-repeat="item in items" ng-animate="{
enter: 'animated flip'
}">
<a id={{item.name}}>{{item.name}}</a>
</li>
</ul>
</div>
</body>
</html>
References
AngularJS Wiki: JSFiddle Examples
AngularJS ng-animate + target Plunker Demo
Getting started with AngularJS
Angular JS 1.2x Developer Guide:Internet Explorer Compatibility
Firefox OS Simulator
Todo App for Firefox OS
I have this code currently does not work, is there any alternative to it?
<ul class="sub">
{% for key, c in categori %}
<style>
#nav.{{c.id}}:hover
{
background-color: #{{c.color}};
}
</style>
<li class="{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....
I have the problem as in # nav. {{c.id}}
ow.ly/i/3vwNp this is the example
Thanks!
The way your CSS is written, it expects the element with the class {{ c.id }} (as interpreted by the Twig parser) to be on the same element with the id nav, e.g.
<li id="nav" class="{{ c.id }}">...</li>
You really shouldn't have more than one element on a page with the same id attribute, strange things happen with JavaScript particularly when you do.
Instead of trying to programmatically define your {{ c.id }} in the style though, why not do something like this?
<style>
#nav .item:hover
{
background-color: #{{c.color}};
}
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
<li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>
You really should only be placing CSS in <style> tags at the top of the document any way, or as better practice teasing them out to .css resource files to include.
This would definitely work:
<ul class="sub">
{% for c in categori %}
<style>
.element{{c.id}} a:hover { background-color: #{{c.color}}; }
</style>
<li class="element{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
...
But it's recommended to separate your CSS rules from HTML and move all your predefined element classes to external CSS asset.