Stack Overflow
Stack Overflow

Questions tagged [tachyons-css]

Tachyons is a functional CSS toolkit for creating fast loading, highly readable, and 100% responsive interfaces with as little css as possible.

Tachyons

Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.

26 questions
9
votes
2 answers

How to combine multiple classNames in React?

I'm writing a small React app with Create-React-App. For simple styling tweaks I use tachyons-css. Due to frequent reappearing CSS styling issues I recently switched from classic CSS styling to CSS modules (also valid question for SCSS). Now I…
ft-be
  • 103
  • 1
  • 1
  • 7
2
votes
1 answer

How to hide table of contents on mobile devices

I am doing my first clumsy steps to set up a blog (with Hugo, via blogdown / R) and struggle with my floating table of contents. After lengthy trial and error I have been able to set it up, however, I am unable to hide the table of contents when…
zoowalk
  • 2,018
  • 20
  • 33
2
votes
1 answer

How to use tachyons-custom?

I am using Tachyons CSS for my web app and I need to add a width css property of width 45% for medium screen. I did npm install tachyons-custom and I don't know what to do next. I couldn't find any tutorial online about adding a new tachyons…
calvert
  • 631
  • 10
  • 33
2
votes
0 answers

problem adding css toolkit like tachyons to next.js project

for training purpose I have created a ropo-Friend web app as a csr , now for the same purposes I am tring to recreate the same project using next.js this time as a great tool for ssr projects and I really have nightmares importing css addons like…
kyrolos magdy
  • 393
  • 1
  • 4
  • 19
2
votes
1 answer

Tachyons - how to display none for landscape screen

I'm using http://tachyons.io/ and have a icon. I want to display that icon only on small devices but when its landscape mode to also display on small devices. Since the screen size for portrait is less than 480px but if I rotate, its more than 480px…
fscore
  • 2,567
  • 7
  • 40
  • 74
1
vote
1 answer

Confusion around the not-small breakpoint in tachyons

Using tachyons css library: I don't understand how the ns breakpoint works. According to the docs the breakpoints are defined as: Media Query Extensions: -ns = not-small [ @media screen and (min-width: 30em) ] -m = medium [ @media screen and…
ExtraInfo
  • 13
  • 4
1
vote
1 answer

Responsive layout using Flexbox and Tachyons

I would like to create a layout like this: I would like to use React and Flex. To do that I'm using Tachyons and it's media queries that are: ns = not small -> @media screen and (min-width: 30em) = [0, 30em] m = medium ->…
user9944766
1
vote
1 answer

tachyons.io: emphasize a single word in italics

My problem I am using the tachyons.io framework to style an HTML page. I would like to emphasize a single word in a sentence with italics fonts, without discontinuing the sentence flow by a line break. The manual The manual suggests using
Adam Matan
  • 128,757
  • 147
  • 397
  • 562
0
votes
1 answer

How to center this container

I need to put my article element in the center its a project in react but something doesnt work its my Signin.js file
0
votes
0 answers

Dynamically add list card items with CSS

I have the following code, and I have two problems with it: it's not dynamic; I am adding cards and they are lost in the page (going left not down), and there is very big padding in the cards, how can I cancel it? #grid { column-width: 100px; …
NEW ANGULAR LOVER
  • 1
  • 1
0
votes
0 answers

tachyons-css does not reflected on the output

Need Help, 'tachyons' is not working. I installed it with npm install tachyons then imported it in the 'index.js' file using import 'tachyons' but it's not working. It does not show any changes in the output although I put ’f1 tc’ in the…
Marni
  • 1
0
votes
2 answers

How to add Tachyons to a css file in React

I get how to add Tachyons to use them for instance like this `
Example
` but how can you make to use in a CSS file so that you can make your own class (which I've seen before) something…
Kodi Shiflett
  • 1
0
votes
0 answers

Full bleed images on mobile only (CSS / Tachyons)

I'm trying to get images on my Hugo site to display full bleed (edge to edge) only on mobile/tablet view. In desktop view, I'd like the images to remain constrained within the parent container. I'm using Tachyons CSS. I've looked into the solution…
HeroTwin
  • 1
  • 1
0
votes
1 answer

How to reshape a div to look and cut the sides in React?

I am not sure if google already has an answer for this but my struggle was that I simply couldn't word this properly so nothing showed up. Here is the style for div:
Inside the…
Tom Larry
  • 101
  • 1
  • 1
  • 5
0
votes
2 answers

having issues using face detection API from Clarifai API

I have added the face detection API from Clarifai APi to my project, however, whenever i copy an image to my project and click on detects, it actually shows the image but it is not detecting the face. see below App.js and FaceRecognition.js import…
Arye
  • 7
  • 3
1
2