tailwindlabs / tailwindcss Goto Github PK

Wow, you really got me hooked on the utility first approach. It's really neat, and Tailwind is fantastic.

One thing I've stumbled upon while integrating it in an existing project (to slowly move much stuff over to utilities) is that an option to disable certain utilities would be really valuable.

For example, in my project, I have a .container class defined in my stylesheet. Since the tailwind utilities load after my already defined components, Tailwind overwrites these styles.

While most of the time one would start off with this on a fresh codebase, for me having the ability to disable utilities like that would be great.

Again, fantastic job on Tailwind. Congrats to all contributors!

Hey,

I've got more a question than an issue about the border utilities behaviour.

<nav class="border-t-2 lg:border-t-0 lg:border-r-2 border-smoke-dark lg:border-smoke-dark"></nav>

Do I necessarily have to include the border color again for the specific screens ?

Because if I don't it shows to the default border color.

Thanks a lot.

I think more example would help people to dive into tailwind. Maybe a navbar could be a good start.

Currently when I run ./node_modules/.bin/tailwind init [filename] as shown in the docs, I must append the file extension.

Wouldn't it be more user friendly if the file extension was automatically added? Like run ./node_modules/.bin/tailwind init tamilwind-config would result in a tailwind-config.js file?

Hello.

Adding "auto" suffix to margin vertical utilites can be usefull with flexbox:

<div class="h-half bg-grey-lighter flex">
    <div class="ml-auto flex flex-col justify-end p-12 text-right">
        <h2 class="my-auto text-5xl font-extrabold uppercase">Centered on rest block</h2>
        <a href="#" class="ml-auto bg-brand text-white w-64 py-3 no-underline text-center font-sans font-medium tracking-wide rounded-xl">Some button text</a>
    </div>
</div>

How it's currently looks

How I'm expected to be

Ah yes, the dreaded first issue! Fortunately more of a question/discussion point than anything.

Is there a best way to use Tailwind with Vue single file components? It would be really nice to keep those one-off styles or component styles inside Vue components themselves, but the tricky part is getting component CSS between the preflight and utilities lines.

The only thing I can think of is to have 2 files — The first file would just contain @tailwind preflight;, and the second would have @tailwind utilities; + any custom utilities users want. In Laravel Mix, if we use the extractVueStyles option, that should extract the Vue component styles at the top of the second file, which is what we want. We could then use Mix's combine() function to join 'em together.

Last I suppose we'd have to add Tailwind to vue-loader's PostCSS options.

Nevermind, all PostCSS plugins in Mix apply to Vue component styles as well, no need to do it manually. 👍

I haven't had a chance to actually test this approach but I figured I'd gather some thoughts in case there's a better way.

Edit Again: Ok! I tested the above approach and it seems to work great. My Vue styles get injected in the right spot, and I'm also able to successfully use Tailwind functions (config, @apply, etc) inside my Vue components. 🎉

Tailwind is such a good concept! I love to use it in the future :)
Thanks for your hard work!!

Using Tailwind CLI for simple projects or just giving Tailwind a spin is a great idea too, but it don't work for me. The build command makes the output to the shell, not in a file. The command and file structure is the same like in the documentation.

Is it only on my computer or is it a bug?

I'm trying to include a component. In the comments of the "bootstrap file" @import is used.
This is not a funcionality provided by tailwind or is it?

I expect that I have to add postcss-import to my workflow.
Am I wrong or are the docs wrong here?

If i import a file like dokumented i get an error.

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@tailwind preflight;

/**
 * Here you would import any custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities can still
 * override them.
 * 
 * @import "my-components/foo";
 * @import "my-components/bar";
 */

@import "my-components/bar"; /*I added this one*/

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 */
@tailwind utilities;

And here the error:

@import must precede all other statements (besides @charset)

What am I doing wrong?

Hey guys, really exciting to see this thing finally released! Congrats!

I noticed the tailwind CLI version doesn't match the version of the package installed.

➜  tailwindtest npm list --depth=0
[email protected] /Users/aaemnnosttv/Code/tailwindtest
└── [email protected]

➜  tailwindtest node_modules/.bin/tailwind -V
0.1.0

I realize this is due to being hardcoded in the CLI but not sure how this is normally handled for node CLI apps. Perhaps it should just be written to a file at build-time that the CLI refers to?

How about adding a helper to add/remove outline?
I am currently facing a situation where I want to remove the focus outline of an input field and, AFAIK, there aren't utilities for this on Tailwind...

or as we call them in Tailwind, leadings

and

or as we call them in Tailwind, tracking

while beeing a correct name, it's not really intuitive IMO.
We are all comfortable with developing in css and over the years line-height and letter-spacing became familiar to everyone an I do not really see the point in renaming that thing while the CSS-Spec contains line-height and letter-spacing.

What was your point in that, maybe I've overseen it?

The documentation mentions the color 'smoke', which I presume is a translucent black/grey color. Most notable .bg-smoke, but I've found some more sprinkled around.

Since it's not an actual value in the default config, I was wondering if it's missing or removed on purpose.

Hey,

Everything works fine until I decided to use components as it's said in the documentation.

Compiling failed :

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                                                                                               12:41:50 PM

 error  in ./resources/assets/sass/app.css

Module build failed: ModuleBuildError: Module build failed: Syntax Error 

(2:3) No .text-white class found.

  1 | .btn {
> 2 |   @apply .text-white;
    |   ^
  3 | }
  4 | 

    at runLoaders (/Users/thomas/Sites/cdsud/www/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/Users/thomas/Sites/cdsud/www/node_modules/postcss-loader/lib/index.js:185:44)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

 @ multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/app.css

 error  in ./resources/assets/sass/app.css

Module build failed: ModuleBuildError: Module build failed: Syntax Error 

(2:3) No .text-white class found.

  1 | .btn {
> 2 |   @apply .text-white;
    |   ^
  3 | }
  4 | 

    at runLoaders (/Users/thomas/Sites/cdsud/www/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/Users/thomas/Sites/cdsud/www/node_modules/postcss-loader/lib/index.js:185:44)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

My wepback.mix.js :

let mix      = require('laravel-mix');
let tailwind = require('tailwindcss');
mix.postCss('./resources/assets/sass/app.css', './public/css/main.css', [tailwind('./tailwind.js')]).disableNotifications();

... and app.css:

@tailwind preflight;

@import "./components/buttons.css";

@tailwind utilities;

@import './main.css';
@import './admin.css';

What's wrong? :/

Margin auto utilities are not documented yet. There's only one mention on the Container section.

Since the auto doesn't apply to other spacing utilities I'm not so sure how you want to present that info, otherwise I would have submitted a PR.

With a fresh Laravel install and a fresh Tailwind install.

I have a simple app.scss with only two lines:

@tailwind preflight;
@tailwind utilities;

And a webpack.mix.js with a few lines:

let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    postCss: [
      tailwindcss('./tailwind.js'),
    ]
  });

My tailwind.js is the default one.

When I run npm run build, it "works" (I have a CSS built and I can use it) but I displays a warning (I don't have this warning without tailwind)

WARNING in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[{"version":"6.0.13","plugins":[null,null,null,null,null,null,null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.13"},null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/XXXXXX/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
(Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
  /XXXXXX/resources/assets/sass/app.scss:3:316: missing '{'
  at error (/XXXXXX/node_modules/css/lib/parse/index.js:62:15)
 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Don't know why. Any clue?

Hi,

Congrats for your amazing work.

I wanted to play around with it and got warning during compilation.

Do you have any idea on how to fix it ?

Thanks a lot.

It would be nice if there was some where in docs a way how to build tailwindcss with webpack.

I really like the potential of tailwind regarding transitioning from utility to component-based styles. Therefore I'm wondering if or how it might be possible to prevent certain utility classes to be emitted (potentially only in prod builds) while mostly relying on @apply and other postcss functions of tailwind.

Hey guys, first of all, I appreciate all of your great work on Tailwind!

Down to business: When I use the list-reset utility class, it is overriding any padding/margin utilities that I want to add. I obviously haven't thought through this as much as y'all, but I would think it would be best for any override/reset utilities to be automatically overwritten by other Tailwind utilities. I doubt anyone putting list-reset and p-top-4 on a list element is expecting anything other than an element with no styling except some top padding.

Again, great work, and let me know if I'm just thinking wrong about this!

Hello all!

Just tried TailwindCSS and It's perfect, but I think that borders should be able to be combined with hover: preffix.

Here is sample. Task make link underline dashed:
<a href="#" class="no-underline border-b hover:border-b-0">Text link</a>

Similar approach with manipulating borders are used on https://laravel.com/ nav menu

I don't know if i missed something with my setup but I am getting

.appearance-none {
appearance: none;
}

When i look at the tailwind docs

.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

In our internal utility framework I've gotten quite used to enjoying .p-2 and .m-2 helpers that set both x and y axes identically. Any chance of bringing that in in?

Is it possible to provide a way to override the various class name definitions for each property?

For example, I'd like to use:
.font-colour-black instead of .text-black
.line-height-none instead of .leading-none

I imagine you could have a new object in the configuration file which could look something like below, which would override the default class name prefixes.

classPropertyPrefixes: {
    'text': 'font-colour',
    'leading': 'line-height'
},

UPDATE 6th Nov 2017: Maybe adopt the naming convention used by Emmet https://docs.emmet.io/cheat-sheet (scroll down to the CSS section)?

I like my utility classes prefixed with .u-, would be nice if it was possible to configure a prefix for the whole library.

@reinink I like that sentence you wrote in #84

This is breaking change, and shouldn't be merged in until the next breaking release.

Since atm this is alpha software I wasn't sure if there is something like a BC promise.
Seems you plan to comply to SEMVER? Even for Alpha, or is 1.0.0 the next BC-Break?

Maybe we should document a "Update"-Chapter where the update-process for tailwind is described. There would be place to explain the difference ^1.0.0 vs ~1.0.0 and the impact on the project.

e.g. if you use ^1.0.0 filesize of a newer version could increase with yarn upgrade.

Many users are be that experienced, so a little explanation and a link to https://docs.npmjs.com/getting-started/semantic-versioning could be nice.

Also there is a place for writing down the BC-promise.

In Installation Step 2 I try to use the utility to create the tailwind.js config file I receive an error. I later discovered that I get this error whenever trying to use the utility.

So the defaultConfig .font-sans font stack doesn't have sans-serif as the last fallback.
Although be unlikely that every font is missing, but if so the font stack actually falls back to Times New Roman on Chrome and Firefox (and most likely others).

ps.: Actually the only windows default in the list is Segoe UI.

Even with Admin console, I am not able to install on Windows 10.. here is the end of log file showing the error:

2367 verbose unlock done using C:\Users\Lenovo\AppData\Roaming\npm-cache\_locks\staging-9cbdc18e1ec36efa.lock for C:\Users\Lenovo\source\tt\node_modules\.staging
2368 verbose stack Error: EPERM: operation not permitted, unlink 'C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json'
2368 verbose stack     at Error (native)
2369 verbose cwd C:\Users\Lenovo\source\tt
2370 verbose Windows_NT 10.0.16299
2371 verbose argv "C:\\nodejs\\node.exe" "C:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "tailwindcss" "--save-dev"
2372 verbose node v6.11.2
2373 verbose npm  v5.4.0
2374 error path C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json
2375 error code EPERM
2376 error errno -4048
2377 error syscall unlink
2378 error Error: EPERM: operation not permitted, unlink 'C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json'
2378 error     at Error (native)
2378 error  { Error: EPERM: operation not permitted, unlink 'C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json'
2378 error     at Error (native)
2378 error   stack: 'Error: EPERM: operation not permitted, unlink \'C:\\Users\\Lenovo\\source\\tt\\node_modules\\fsevents\\node_modules\\ansi-regex\\package.json\'\n    at Error (native)',
2378 error   errno: -4048,
2378 error   code: 'EPERM',
2378 error   syscall: 'unlink',
2378 error   path: 'C:\\Users\\Lenovo\\source\\tt\\node_modules\\fsevents\\node_modules\\ansi-regex\\package.json' }
2379 error Please try running this command again as root/Administrator.
2380 verbose exit [ -4048, true ]

Has anyone tried using the @screen directive? Doesn't seem to reflect in the compiled CSS. Here is what I'm trying to do:

.main-nav .nav-item {
  @apply .inline-block .uppercase .font-bold .mr-4 .pb-3 .border-b-4 .border-transparent;
  @screen sm {
    @apply .block;
  }
}

The first @apply rules work but the @screen directive does not reflect.

Thanks!

Enjoying working with the release, good work!

I'd like to propose triggering a rebuild when the config file (tailwind-config.js) is updated if a build tool is being used – ie. webpack.

Basically in the same way as a new build is triggered when you update a css/sass/js file. It would mean that modifications can be made to the config file without having to halt and restart npm watch for instance.

First of all, thanks for this great project, I've been waiting for this since ages!

I don't know if I'm reporting this in the correct place, but my problem is this: if in my component I @apply a class that does not exist, I get an error such as:

ERROR in ./css/app.css
Module build failed: ModuleBuildError: Module build failed: Syntax Error

(3:3) No .foo class found.

and my webpack watch breaks, and does not pick up further changes until I stop and restart webpack.

I think it's because of Tailwind's implementation of @apply, which completely break the webpack watcher until the error is fixed and webpack restarted.

Any easy workaround for the time being? It's a bit frustrating to stop and restart webpack everytime I add a typo in my components.

How can I help?

Hi, I'm just wondering what are peoples' thoughts about perhaps including some transition-based utility classes?
Nothing too complex, just to cover some common use-cases, eg. smooth hover state transitions on buttons etc. If so, what kind of syntax would you expect to use to keep in line with Tailwind's current naming conventions?

The version number on the homepage (Version 0.1.0 - Alpha) doesn't match the latest release (v0.1.2).

Hey there,

I love my utilities to be marked as !important because i've seen some people overwriting utilities (which is more than bad). If specitifity of e.g. a bem-item is higher the utility gets overridden.

Example:

.mx-auto { … }

/* this is not good, but happens from time to time. If i mark my utilities as important, this will not work and the user MUST remove the class mx-auto from the html */
.card > .card__image {
    margin-left: 10px;
} 

<div class="card">
    <div class="card__image mx-auto">
        <img … />
    </div>
</div>

I've written a tiny postcss plugin for marking utilities important.
https://www.npmjs.com/package/postcss-important-startstop

Problem

The plugin is based on comments in the css.
It's not the only postcss plugin which does so.

If i try to use it with tailwindcss, the @tailwind utilities can be marked important by using

/* @important(start) */
@tailwind utilities;
/* @important(stop) */

This works like a charm.
The problem is, that the custom utilities are added to the end of the css-file magically.

So this happens:

/* @important(start) */
@tailwind utilities;
/* @important(stop) */

/**
 * Here you would add any custom utilities you need that don't come out of the box with Tailwind.
 */
.bg-hero-image {
    background-image: url('/some/image/file.png');
}

results in this:

I have no chance to modify the "custom utilities" with my comment-based plugin.

Is it somehow possible to "remove the magic" and render the custom utilities with something like that?

@tailwind custom-utilities;

WDYT?

Hi @adamwathan, @reinink & @davidhemphill!

Really enjoying Tailwind already and hoping to help you guys as much as I can. 🙂

My suggestion is that we can choose the version of the docs, like you can on the Laravel docs site (with a <select>).
Let it redirect automatically to the latest version, but also have a master option, where we can see the latest changes.

This would make things easier when referring to the docs in issues for example. 🙂
Right now we always see master, which can be confusing sometimes.
Definitely when the first major release will come and Tailwind will be used in multiple versions I think.

Keep up the good work guys! 🙂

Support for display: grid; and its props would be swell.

Hello,
I like to have sidebar like TailWindCSS.
How can I have it?

Hello, could you explain how tailwind differs from Atomic CSS (http://acss.io)?

Are there any fundamental design differences that led to you creating something different rather than using an existing utility framework such as Atomic?

May also be good to link to 'prior art' such as Atomic in this respect within the docs?

Naming is a bit weird here, if you add print-styles like mentioned in https://tailwindcss.com/docs/responsive-design/#print-screens combined with the @screen directive.
https://tailwindcss.com/docs/functions-and-directives#screen

This would result in @screen print which is weird.
I have no better name, maybe @named-media print or something like that?

Or is there a better way already baked in?

This is just a minor quirks in a great framework.
Wenn done, well done!

Hey guys! Awesome project you have here!

I just noticed that your search isn't ready yet? Would you be interested to use our service to perform search on your documentation?

We do have a product just for that! It's called DocSearch and it's free :)

It already has been adopted by Bootstrap, Middleman, Facebook ( React ), Vue.js, Laravel and a lot more!

If you are interested, I can definitely set it up for you and send you a pull-request 😊

Let me know what you think!

Best,
Lucas.

First of all great work @adamwathan, @reinink, @davidhemphill & Steve Schoger!
Really great framework and it's only in alpha, so I'm excited to see the 1.0 release! 🙂

When navigating through the docs, I think it could be handy if we can see the version number and the GitHub link in the sidebar, like we have on the main page.
Maybe beneath the logo?
Since Twitter-link is also on the main page, you can add it also to the sidebar?

Just a rapid thought.

Keep up the good work guys! 🙂

Can you add outline property?
It's very useful when building forms to have an outline: none; attribute :)

I have been waiting to get my hands dirty with tailwind, and just started playing around with it! I like it so far, but it does take some getting used to.

One of the utilities I am missing is hover:shadow since there are cases where we want to only have a shadow when hovering.

Now I know that I can add that utility myself pretty easily, but I thought that it is a fairly common thing to do, so might as well be considered to be added to the core.

Hey there,

I'm currently building my first site with Tailwind and it seems that i will finish it tomorrow
(which was really, really fast).

One kind of utilitis I was missing so far was order.
Especially with responsive helpers.

I like that quite a lot for reordering items on desktop or mobile for different viewports.

I'm quite sure you thought about that and you have a reason why you didn't add them. Would you mind sharing your thoughts? As far as I know it's safe to use (or am I wrong).

If they should be added, I suggest adding order from 1 to 5 including responsive utilities. (I don't care about a few more bytes here as we will later find a solution for the component based approach mentioned in #27 (comment)

Hi,

I noticed that the class name dot is facultative when use with the @apply directive.

.foo {@apply .text-white;} .foo {@apply text-white;}

Both are working but should we stick with the dot syntax or can we safely use both ?

Description

The line-height property on html element is altering the element heights.

There is a workaround that works for me. If I set line-height to 0 on the html element, it is solves the issue but I think this should be fixed on the core.

Reproduction

To show you up what I am talking about, I created a parent div with a background color which contains a img.

<div class="bg-blue">
  <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?auto=format&fit=crop&w=200" alt="Cat">
</div>

Expected

It should not alter the height of my div at all. In other words, the blue area should not appear.

I put the following in my .scss file:

.btn {
  @apply .font-bold .py-2 .px-4 .rounded;
}
.btn-blue {
  @apply .bg-blue .text-white;
}
.btn-blue:hover {
  @apply .bg-blue-dark;
}

and after running webpack I can use the classes but I get the following error at the end of the build process:

WARNING in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[{"version":"6.0.13","plugins":[null,null,null,null,null,null,null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.13"},null,null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","includePaths":["./node_modules/foundation-sites/scss/","./node_modules/font-awesome/scss/","./node_modules/motion-ui/","./node_modules/video.js/src/css/"],"sourceMap":true}!./sass/styles.scss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/sass/styles.scss:6698:3: missing '}'
at error (/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules/css/lib/parse/index.js:62:15)
@ ./sass/styles.scss 4:14-245
@ multi ./node_modules/jquery/dist/jquery.min.js ./node_modules/what-input/dist/what-input.min.js ./node_modules/foundation-sites/dist/js/foundation.min.js ./node_modules/motion-ui/motion-ui.js ./node_modules/video.js/dist/video.min.js ./sass/styles.scss

When I remove @apply the build process completes without error.

The docs use single line comments //

https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css

If somebody c&p this in his css he will get the following error if someone does not use https://github.com/moczolaszlo/postcss-inline-comment

I'd suggest to remove single line comments from the docs?

Hey there,

i failed in code-style in #89
Would you mind adding ESlint to the build chain, so collaborators are warned if the're failing?

Maybe we can automate tests and linting and use travisci or smt like that?