I just installed TailwindCSS and would like to learn about it. After some problem-solving during installation, I meanwhile had no more warnings in the installation process, but when now trying in VSCode some of the first examples from the Tutorial, some of the Tailwind classes used in the HTML file can be applied and have an effect in the browser, while others seemingly cannot be applied and have no effect in the browser.
Could anyone please help me, what needs to be done to make the TailwindCSS installation fully work and be able to make use of all Tailwind classes?
For example, this very first example from the tutorial on the Tailwind homepage works correctly for me and the button is correctly shown in blue and gets darker, when hovering over it in my browser (MacOS, Safari):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="tailwindout.css" />
</head>
<body>
<button class="bg-sky-500 hover:bg-sky-700">
Save changes
</button>
</body>
</html>
But one of the next examples in the tutorial on the homepage has no effect and the selected text is not shown in fuchsia color in my browser (MacOS, Safari), neither when calling the html file with live server from VSCode nor when directly opening the html file in the browser from the Mac Finder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="tailwindout.css" />
</head>
<body>
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
<p>
So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers
a strange calm came over me. I don't know if it was divine intervention
or the kinship of all living things but I tell you Jerry at that moment,
I <em>was</em> a marine biologist.
</p>
</div>
</body>
</html>
Related
Simple html file with attached css file. Code completion does not work. (inline css does)
I've spent lots of hours trying to figure it out. Hope this will save some time for those who are still struggling. See the answer below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Autocompletion will not work if Code Insight feature is disabled.
So my problem was with the big css file. Actually, it's a regular size file (tailwind css processed by postcss with autoprefixer plugin).
Css file was around 3MB, but code insight stops working for files that bigger than 2.5MB by default.
The solution is to increase filesize limit.
Go to Help > Edit Custom Properties
Paste config
# Maximum file size (kilobytes) IDE should provide code assistance for.
idea.max.intellisense.filesize=10000
Save and restart
I am currently working on a blog, and everything on my end (mac) is working perfectly with my html/css. However, when I send the files in a zip to a PC, the css is not reading. I've tried switching the link tag form "style.css" to "/style.css". That did not have any effect on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
Nothing was wrong with the coding. The CSS formatting was rearranged and I made a rookie move of not inspecting before spending hours on google! Just had to go in and put it back to CSS format. Problem solved! Thanks guys!!
I have a problem with the navigation bar,
I have a navigation bar for my project. As you can see my code below if I use the link and get it from an external source it is working well. But there is a problem for me when the net is a bit slow I can see the navigation's loading on my screen. it is a very small duration but it disturbs me very much. So I decided to use CSS source from my project folder but could not do that. I tried many code samples but could not do it correctly. If somebody helps me, I will appreciate it. Thanks.
I am also still trying to solve it but I wanted to get some help.
function MyNavBar(params) {
//console.log(params["conpanyID"]);
return (
<div>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
</head>
1-When I use link/external source
[1]: https://i.stack.imgur.com/SO5qB.png
2-When I use CSS file from my project folder.
[2]: https://i.stack.imgur.com/MqHqo.png
you might have linked your stylesheet inside the body instead of the header section , because of which your page will load first, then your CSS
here is an example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" href="css/s.css">
<link rel="icon" href="css/si.ico">
</head>
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
I am using semantic ui, and the html works fine on my pc. When I upload it and run my site from the internet, it looks like the normal html is working, but sematic specific functionality is missing. Is it not getting the semantic .css or something? I'm a bit new to this, so if you could help me debug I would be be grateful.
I am using Semantic version 1.8.1.
My html is located relative to all the source files in the same way as the examples which come with the release in the /examples directory. So I access the file relatively such as "../dist/semantic.css"
Here is the head section of the default.htm main html page.
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Spin Boogie</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="kitchensink.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<!-- Used with Tab History !-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js"></script>
<script src="../dist/semantic.js"></script>
</head>