I've recently installed Tailwind for my Vue project. It took some time to get it work but finally, it worked, even with code completion in VS Code.
The problem I am facing right now is that I cannot use the breakpoints anywhere in my project.
<div class="container mx-auto">
<div class="card w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
// Content
</div>
</div>
Watch a gif of it.
What I want to achieve is to have the div be 1/3 when on desktop, full width on mobile. What I am getting is full width everywhere. I can't seem to find anything else like this on the internet either.
I'd like to mention that I am using VueJS, if that's of any help. Any ideas?
Thanks in advance.
Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to postcss.config.js.
npm install postcss-preset-env --save-dev
postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')({ stage: 0 }),
require('tailwindcss')('tailwind.js'),
require('autoprefixer')
]
}
Related
All the classes in my project (react + vite) work except the media queries, and I am having a hard time figuring out why. I tried manually adding all the breakpoints (with the default values) in the tailwind config file which had no effect at all.
function Sidebar(props) {
return(
<>
<aside className="text-xl p-4">
<h1 className="font-chivoMono ">Noteit</h1>
<h3 className="text-xl md:text-7xl text-white sm:text-red-500 md:text-green-300 lg:text-pink-300">{props.displayName}</h3>
</aside>
</>
)
}
export default Sidebar
I took all the configuration steps correctly (and I think no classes would have worked if i didn't)
I tried to run the command
npx tailwindcss -i ./src/styles.css -o ./dist/output.css
thinking it might do something but honestly I am just completely clueless to why this is not working
Also, the media queries do not show up while inspecting the page.
I recently started learning web development and I was playing around with a RoR app, to which I added the bootstrap gem using the command:
bundle add bootstrap
It went fine, I changed the /app/assets/stylesheets/application.css extension to .scss, I then added
#import "bootstrap";
#import "bootstrap-sprockets";
to said file, and restarted the server. Now I could clearly see that the font changed, and started playing around with different properties. I created some colourful buttons, a callout and then I wanted to put a jumbotron at the top of the page.
I realised however, that it had no background colour, even though it should be gray. Everything else seems to work, but I can not get it to have a background for some reason, and there seems to be noone having the same problem which is not a good sign.
This is how it looks
(https://i.stack.imgur.com/R630H.png)
<div class="container">
<div class="jumbotron text-center">
<h1>
This is my header
</h1>
<p>
Hello this should maybe someday be a jumbotron
</p>
</div>
<div class="callout callout-primary">
<h4>Primary Callout</h4>
This is a primary callout.
</div>
<%= link_to "About me", 'about_me', role: "button", class: "btn btn-info"%>
<button class="btn btn-success">Green button</button>
</div>
Bootstrap version: 5.2.2, Ruby version 3.1.2, RoR 7.0.4
I have no clue what is going wrong since the other elements seem to work. Any help is much appreciated. Link to my full repository
I tried using a full html5 template and adding
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
To the files , which did make it work, but the whole point of installing the gem is so I dont have to do that right?
I'm afraid Bootstrap v5.2 does not have a jumbotron anymore as v4 did.
Try this instead: https://getbootstrap.com/docs/5.2/examples/jumbotron/
Also you can check out the available components for v5.2 here: https://getbootstrap.com/docs/5.2/components/accordion/
Happy hacking!
I am playing around with Tailwind and Next.js, but I am having trouble figuring out if it's installed or not. Even when I go to https://play.tailwindcss.com/ and try the following HTML element styled with Tailwind.
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
It doesn't render it underlined or even an h1 element. I follow the instructions at https://tailwindcss.com/docs/guides/nextjs verbatim. Any ideas?
The reason it's not working for you is that you are using className instead of class.
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
Using NPM, you can see if a specific package is installed.
npm view tailwindcss version
Or
npm info tailwindcss version
If you're using NPX, you can do the following.
npx gvi tailwindcss
I have a project created with Laravel 8, Jetstream, I've installed Tailwind CSS and fontawesome-free too.
When I use this classes like that:
<i class="fa fa-user-circle text-white cursor-pointer text-6xl"></i>
text-white and cursor-pointer works perfectly but "text-6xl" don't
if I use style="font-size: 60px" this works, but the class of Tailwind don't
The issue is that using laravel 8 with scss, but the output for your tailwind is css, try changing it and it should work.
Run npm run dev
Not all of tailwind css classes will be available unless you build dev assets.
You can also npm run dev watch to watch the files and recompile when one of them changes.
I'm trying to figure out what exactly is happening, but I'm all out of ideas. I've recently transitioned to Tailwind and I set it up according to instructions for create-react-app, which can be seen here.
I've also tried another setup, but I got the same problem. That setup can be seen here.
For whatever reason, everything is working normally in local development (when running code with npm start). But when I build the code, I'm getting some really weird stylings.
This is in local development
This is when npm run build is run.
Specific part of the code which isn't displaying as it should:
<div className='w-full lg:w-1/4 m-auto p-5 text-center lg:shadow-2xl rounded-xl'>
<HelmetComponent
title='Log in | Notify Me'
description='Login page for Notify Me.'
/>
<NavbarLoggedOut/>
<h1 className='font-bold'>Log in</h1>
<LoginForm
onSubmit={onLogin}
/>
<div className='text-base mt-2'>
<p>
Don't have an account? <LinkButton onClick={() => history.push('/signup')} label='Sign up here!' />
</p>
</div>
<div className='mt-4'>
<GoogleOAuthComponent
buttonText='Log in with Google'
setErrorMessage={updateErrorMessage}
/>
</div>
<div className='mt-4'>
<LoadingBar
isLoading={waitingForServerResponse}
/>
</div>
<div>
{displayInfoMessage()}
</div>
</div>
I've opened both files with inspect element, and everything seems to be the same. And problem is everywhere where there is any kind of h1 element as far as I saw.
This is my tailwind.config.js:
const colors = require('tailwindcss/colors')
module.exports = {
important: true,
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
main: {
light: '#508991',
DEFAULT: '#1b262c',
'100': '#DBF9F4',
'700': '#60949B',
},
black: colors.black,
white: colors.white,
gray: colors.trueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
blue: colors.blue,
green: colors.green,
},
},
variants: {
extend: {},
},
plugins: [],
}
I've also tried setting purge: false to see if that was causing the problem, but it didn't change anything.
If anyone has any kind of idea what could be causing this, I'd appreciate it.
EDIT: I've also noticed that the padding differs on development and build, so if anyone has any idea why that's happening, that would be also nice.
FINAL EDIT: Problem was in the leftover boostrap files, since the project used that before switching to tailwind. In development environment bootstrap css was loaded on top of everything else, which lead to strange behavior.
There was leftover import in the index.tsx: import 'bootstrap/dist/css/bootstrap.min.css'
After that import was removed, and boostrap package was removed from package.json file and node_modules folder was deleted and packages were reinstalled problem disappeared. True layout was actually generated by npm run build
Problem was in the leftover boostrap files, since the project used that before switching to tailwind. In development environment bootstrap css was loaded on top of everything else, which lead to strange behavior.
There was leftover import in the index.tsx: import 'bootstrap/dist/css/bootstrap.min.css'
After that import was removed, and boostrap package was removed from package.json file and node_modules folder was deleted and packages were reinstalled problem disappeared. True layout was actually generated by npm run build
Tailwind resets all headings to have the base font size (16px by default) so unless you are explicit, that’s what you get. That means you’re actually getting extra styling in development that isn’t supposed to be there unless you have custom styles somewhere.
Add text-xl Or whatever size you want it to be to the h1