I am a beginner web designer, using windows10.
I'm using tailwind(version 1.9.6)
I want to use prefix( such as sm and md ) with component which I extracted with #apply in css file, as you see below.
css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.itemcase {
#apply border border-gray300 text-sm font-semibold
}
}
I thought the code below would work, but did not work.
#layer components {
.itemcase:sm {
#apply border border-gray300 text-lg font-bold
}
}
how can I solve this problem?
I read documents( https://tailwindcss.com/docs/functions-and-directives ) that seemed to be related to this problem, but could not reached the solution.
Please help me...
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
.itemcase {
#apply border border-gray-300 text-sm font-semibold
}
}
Maybe it works. 😊
Related
i cant seem to get tailwind-rn to work on my app, i have tried all the suggestions made everywhere but still can't figure out whats wrong. CSS files and json are building properly when i run yarn build:tailwind.
Here is my code, please feel free to ask for more info...
App.js
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { useTailwind } from "tailwind-rn";
import { TailwindProvider } from "tailwind-rn";
import utilities from "./tailwind.json";
export default function App() {
const tw = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View style={tw("justify-center flex-1 items-center")}>
<Text style={tw("text-red-600 justify-center")}>
Open up App.js to start working on your!
</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
Tailwind-config.js
module.exports = {
content: ["./*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
corePlugins: require("tailwind-rn/unsupported-core-plugins"),
};
My directory
I have tried all the recommendations here:
Why is my Tailwind ract native not changing anything?
the official GitHub repo for tailwind-rn.
I am expecting my app's UI to update using tailwind but nothing happens
Did you edit the global.css/input.css file to add these?
#tailwind base;
#tailwind components;
#tailwind utilities;
Here is an original code from compiled TailwindCSS file:
.translate-y-full {
--transform-translate-y: 100%;
}
It does not work. The syntax of CSS is incorrect. When I changed it to:
.translate-y-full {
transform: translateY(100%);
/* --transform-translate-y: 100%; */
}
It started to work.
Maybe I am missing something but it seems to be bug and a big one...???
Add transform to the classes.
<img class="transform translate-y-full" ...>
Maybe you forgot to put this line below in your css codes
#tailwind base;
I'm trying to add/change Font Awesome icon in JHipster 5 app.
I can print only icons that already in default template.
I can change:
<fa-icon [icon]="'home'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
to:
<fa-icon [icon]="'asterisk'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
but can't change to
<fa-icon [icon]="'tv'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
or any other icon.
Are they defined in some place?
Icons are in src/main/webapp/app/vendor.ts, here you can add new icons.
To complete Alexandre answer ;
Example to add the twitter icon :
(in "jhipsterVersion": "5.1.0")
read node_modules/#fortawesome/angular-fontawesome/README.md
yarn add #fortawesome/free-brands-svg-icons in src/main/webapp/app/vendor.ts
declare your icon :
.
import { faTwitter } from '#fortawesome/free-brands-svg-icons';
library.add(faTwitter);
in your html, use and don't forget to tell it is from fab (Brand)
.
<fa-icon [icon]="['fab', 'twitter']"></fa-icon>
Maybe you should also re-run webpack:build. But for me it worked directly
(see the top of of src/main/webapp/app/vendor.ts)
/* after changing this file run 'yarn run webpack:build' */
For Jhipster 6 the file to define icons to be used is
src/main/webapp/app/core/icons/font-awesome-icons.ts:
import { faAmazon } from '#fortawesome/free-brands-svg-icons';
export const fontAwesomeIcons = [
faAmazon,
faUser,
...
and remember to refer to the icon with (note 'fab' instead of 'fa' for brands icons):
<fa-icon [icon]="['fab', 'amazon']"></fa-icon>
If you plan to include brands free icons (amazon icon is there) you should also install the npm package:
npm install --save #fortawesome/free-brands-svg-icons
If you tried to add your icons like so:
vendor.ts
import {
// other imports
faFileSignature,
faLock
} from '#fortawesome/free-solid-svg-icons';
// other imports
library.add(faFileSignature);
library.add(faLock);
but it didn't work and you get an error telling you that global styles are deprecated, I fixed it like this.
I created a new icon.module.ts and imported it in the shared-libs.module.ts.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FontAwesomeModule, FaIconLibrary } from '#fortawesome/angular-fontawesome';
import { fas } from "#fortawesome/free-solid-svg-icons";
#NgModule({
declarations: [],
imports: [
CommonModule,
FontAwesomeModule
]
})
export class IconsModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas);
}
}
I hope I helped.
So I am trying to add a legend of the calendar layover colors like in the picture below as a webpart in SharePoint 2013. The calendar webpart is on the home page but the color coded layovers do not make any sense without a legend showing what each color means. So is there a webpart that will allow me to do something like in the image below? Thanks for any help you can provide.
If static HTML will do, you can do something like this:
#legend, img {
width:100%;
}
.legendItem {
width:33%;
float:left;
height:30px;
line-height:30px;
text-align:left;
}
.label {
color:white;
padding-left:5px;
}
.onboarding {
background-color:green
}
.pending {
background-color:purple
}
.offboarding {
background-color:red
}
<img src="https://i.imgur.com/wlZdaCZ.png">
<div id="legend">
<div class="legendItem onboarding"><span class="label">Onboarding</span></div>
<div class="legendItem pending"><span class="label">Pending Approval</span></div>
<div class="legendItem offboarding"><span class="label">Offboarding</span></div>
</div>
I'm trying to build a div with uncertain number of child divs, I want the child div have flex="100" when there is only one of them, which takes the entire row. If there are more than one child divs (even if there are three or four child elements), they should all have exactly flex="50", which will take half of the row.
Any idea how could I do that?
Thanks in advance.
Another way is <div flex="{{::flexSize}}"></div> and in controller define and modify flexSize e.g $scope.flexSize = 50;
Thanks for the help from #William S, I shouldn't work with flex box for a static size layout.
So I work with ng-class to solve my problem.
HTML:
<div flex layout-fill layout="column" layout-wrap>
<div ng-repeat="function in functions" ng-class="test" class="card-container">
<md-card>
contents
</md-card>
</div>
</div>
My CSS is like the following:
.test1 {
width: 100%;
}
.test2 {
width: 50%;
}
The initial value of $scope.test is 'test1',by changing the value from 'test1' to 'test2', the width of children divs will be set to 50%.
Defining "flex" inside an element will always try to take up the most amount of space that the parent allows, without supplying any parameters to flex. This needs to be accompanied by layout="row/column", so flex expands in the right direction.
Is this what you're looking for?
http://codepen.io/qvazzler/pen/LVJZpR
Note that eventually, the items will start growing outside the parent size. You can solve this in several ways, but I believe this is outside the scope of the question.
HTML
<div ng-app="MyApp" ng-controller="AppCtrl as ctrl">
<h2>Static height list with Flex</h2>
<md-button class="thebutton" ng-click="addItem()">Add Item</md-button>
<div class="page" layout="row">
<md-list layout-fill layout="column">
<md-list-item flex layout="column" class="listitem" ng-repeat="item in items" ng-click="logme('Unrelated action')">
<md-item-content layout="column" md-ink-ripple flex>
<div class="inset">
{{item.title}}
</div>
</md-item-content>
</md-list-item>
</md-list>
</div>
</div>
CSS
.page {
height: 300px; /* Or whatever */
}
.thebutton {
background-color: gray;
}
.listitem {
/*height: 100px;*/
flex;
background-color: pink;
}
JS
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.items = [{
title: 'Item One',
active: true
} ];
$scope.addItem = function() {
newitem = {
title: 'Another item',
active: false
};
$scope.items.push(newitem);
}
$scope.toggle = function(item) {
item.active = !item.active;
console.log("bool toggled");
}
$scope.logme = function(text) {
alert(text);
console.log(text);
}
});
Use below :
scope.flexSize = countryService.market === 'FR'? 40: 50;
<div flex="{{::flexSize}}">